I’m developing an HTML5 canvas game and one very frustrating thing my users keep reporting is that if they double tap the canvas while playing the game, the little blurred glass rounded rectangle briefly appears and jumps at the user’s finger. I believe this is the text selection magnifying glass feature? It happens on both iPads and iPhones. I have been trying for the past hour to get rid of it, to no avail. What am I doing wrong? I have tried the following CSS:
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none !important;
user-select: none;
-webkit-user-select: none !important;
-webkit-text-size-adjust: none;
touch-action: manipulation;
I have tried calling preventDefault
on the touch start event.
I have tried disabling the context menu from appearing on right clicks.
I have tried adding the above css to every element on the page.
I have tried disabling zoom through the entire document.
Literally nothing works. Is it possible to get rid of this thing?!