-webkit-touch-callout doesn't work on iOS 15

Question

kirchet OP

Created Sep ’21

Replies 3

Boosts 1

Views 3.0k

Participants 5

-webkit-touch-callout is not working in iOS 15 mobile Safari. Here is the sample code where this bug is reproducible.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>___</title>

    <meta name="description" content="Interactive financial charts for analysis and generating trading ideas on TradingView!">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <style type="text/css">
        html, body {
            min-width: 320px;
            height: 100%;
            width: 100%;
            overflow: hidden;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-text-size-adjust: 100%;
        }
    </style>

<body>
</body>
</html>

Boost

Answer 1

colorio OP

Oct ’21

Confirmed. We're facing this same issue with multiple web apps.

2

Answer 2

Sean Kent OP

Oct ’21

I can also confirm.

The magnifier (touch callout) is presented even when there is no text which can be selected, so this definitely seems to be a bug in safari.

The only thing that seems to prevent this is calling event.preventDefault on touchstart. However, this isn't a viable solution since that also disabled scrolling, but it may be a workaround in some cases where scrolling isn't needed.

1

Answer 3

Slipkonn OP

Feb ’22

Hey! I faced same problem while working on images copy/share protection (hehe), and I was able to resolve it by adding -webkit-user-select: none to target element's parent. Now it's not selectable and callout won't show up.

1