I have some elements in my iPhone website that don't have any text in them but require the user to click and hold on them (DIVs). This causes the text-highlighting/editing loop/cursor to show up, which is really distracting.
I know there is a CSS rule for removing the black-box that shows up on clickable elements when they are touched. Is there anything like that to disable the text magnifier?
Just got a response from the Developer Center help desk. I needed to add this CSS rule:
-webkit-user-select: none;
On IOS 15.2 -webkit-user-select: none; fixed the issue, but only partially.
A long press doesn't show the magnifier anymore. However, if you double-tap and hold, it magically still appears.
There is still no 100% reliable way except event.preventDefault on touchstart. But this also blocks underlying actions so things like buttons with long-press tooltips break. Therefore, it is not always an option...