Avoid -webkit-user-select (a.k.a Why I hate CSS)

No Gravatar

So i spent longer than I care to admit working on a stupid problem at work.  Particularly, we were just finally getting around to getting it to work on iOS (and safari for testing), and we had a textbox that refused to allow input when you clicked/touched it.  No cursor would show up, and oddly we could get input to sometimes go in if you touched it just so, or at the right time, or used the tab key to select the field.  But only one letter could be inputted.

We use a lot of javascript – our whole app is javascript, and uses the dojo framework – and we had a lot of event listeners inside of text-boxes that re-direct events or capture them and create new events to do more normalized event handling across browsers.  So I naturally assumed the problem was there.

So I created a test-page that had all the same stuff on it basically – at one point I even made it literally place the same UI code on it except for all our data handling, and framing (nav menu, header bar, etc).  It always worked perfectly fine.  But the app would continue to have the problem.

Finally I got two identical stack traces from both the app and the test page when I clicked in the box and attempted to enter text.  So I decided to look outside of the javascript.

It turns out the culprit was a single CSS rule we had:

* {
-webkit-user-select: none;
}

So, of course I’m doing terrible things just by having a ‘*’ selector – but in our app we are acting like a kiosk mode, so we don’t want people selecting text and copying and pasting it places – partially because in android that allows you to break out of the application context.

The fix ended up being stupid simple, it was to just make the rule “everything, EXCEPT input fields.”

Which turned out to look like this:

*:not(‘input’) {
-webkit-user-select: none;
}

I hope this saves someone the stupid amounts of time I spent on this.

Also, there is a helpful note from Can I Use that says “iOS does not allow input elements to be focused (and thus prevents text input) when the element has -webkit-user-select: none set” under the “Known Issues” section of this feature/rule. This would have been good to find prior to the holidays.

User-Select_CanIUse

(thanks to this stack overflow post for finally helping me get pointed in the right direction: http://stackoverflow.com/questions/20495827/text-field-not-working-in-safari)

And, this brings me to my final point – CSS sucks.  I heard a talk once where the speaker said our relationship with CSS as web developers is basically Stockholm syndrome, and I think it is true.

For my issue, why – oh why – does CSS ever effect the functionality of a page?  It is supposed to be about appearance, not behavior.  So something like this should never stop my user from inputing text into a text-box.  Instead the “disabled” attribute should do that.  So I can debug it from a standard javascript timeline or debugger.  But NO, instead we get crazy world where me telling the browser not to allow text-selection causes the input box to not receive input, and nothing in my standard toolbox has a method of telling me that is what is going on.

That is crazy-cakes my friends – crazy cakes.

And it is one of the many reasons when it comes to CSS I’m not a fan – but I am a hostage, and I have to learn to love my captures.