Disable the text-highlighting magnifier on touch-hold on Mobile Safari / Webkit
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;
Add this to the CSS
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */}
Use these CSS rules:
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */