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.
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.
It turns out the culprit was a single CSS rule we had:
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:
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.
(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.
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.