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

Question

kirchet OP

Created Sep ’21

Replies 3

Boosts 1

Views 3.2k

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

	<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>