Question

I’m building a webapp that targets the iPhone. And for the most part I don’t want a user to be able to select the text on the screen (ie button text, toolbars, etc), so in my css I specify the default behavior for -webkit-user-select: none;. But on certain table cells I do want the user to be able to select text, so I apply the css class below .selectable which changes the -webkit-user-select: to auto. Now this works in Chrome and Safari, but not on the iPhone. Could someone explain why and/or how to fix it?

body {
    /* Remove the iphone callout */
    -webkit-touch-callout: none;
    /* Remove the iphone link highlight */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Prevent the automatic resizing of text */
    -webkit-text-size-adjust: none;
    /* Limit copy and paste to only elements we want */
    -webkit-user-select: none;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    margin:0;
    padding:0;
    min-height:460px;
}

.selectable, input, textarea {
    -webkit-user-select: auto;
}

Edit: I tried removing the -webkit-user-select:none altogether, and while it does allow me to select other things, it does not allow me to select the text of a table cell, only the row as a whole. Is there anyway to get this to work as is or do I need to remove the table altogether?

Answer 1

Note that the text of the table cell is only available for selection if the zoom level is high enough for the user to pull the selection handle inside a cell without triggering the selection of other elements. This is nontrivial to avoid, and happens on all pages.