Prevent Highlight of Text on iOS - css

Question

I have a web application that uses an HTML canvas that is made interactive through the use of JavaScript mouse and touch events. Recently, iOS Safari has begun putting the text highlight callout on the canvas if the user long-presses the canvas. Since the canvas is meant to be interacted with on iOS devices, this callout appearing is disruptive to the user experience.
The highlight is appearing on the canvas's fallback text (the contents of the canvas element) even though the browser does support canvas, so the text should not be present. The text is not visible, but copying from the callout adds the canvas fallback text to the clipboard, confirming that this is what the browser is selecting. Removing the text from the canvas element does not stop the callout from appearing, though; it just highlights and allows copying of an empty string.
The issue persists despite my use of these CSS properties on the canvas:
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Demo of the issue: https://codepen.io/KingDragonhoff/pen/vYKoajK
Image of the callout appearing: https://imgur.com/a/dCm6uPC
How can I stop iOS Safari from showing the highlight callout on the canvas element?

Answer 1

Put canvas to div can solve you problem.
.container {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#canvas {
background-color: firebrick;
}
html {background-color: #3d4359;}
<div class='container'>
<canvas id="canvas" width="400" height="400">This is the canvas fallback text.</canvas>
</div>
Try to check this codepen on safari: https://codepen.io/taimanh229/pen/YzGYLwQ (Pass on iphone 7 ios 13)

Answer 2

You have to create a 'touchstart' event listener and call e.preventDefault() on it.
You must do this even if you are also using Pointer events instead of touch events. It is not enough to cancel those pointer events, even though they are of e.pointerType === 'touch'!
canvas.addEventListener('touchstart', function(e) { e.preventDefault(); });

Answer 3

The problem out here looks to be that the iOS device is assuming there can be something selectable on the page.
If the canvas is the only element that is supposed to be on the page, you can apply the styles to the html element directly.
In this case, adding your styles to the html selector should work for you.
html {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
Although, if there is anything else supposed to be on the page, you might have to live with that not being selectable as well.