I've been hanging out in the jQuery Mobile IRC chat room lately and a user came in with a rather odd issue. He had a jQuery Mobile based page run via the PhoneGap wrapper that would crash (a bad SIGSEGV) when users entered a 7 in a form field. Yes, a 7.
I had absolutely no idea what this could be, but I ran the user through the normal tests I do when something bat-crap crazy happens. I had him remove parts of the form, remove jQuery Mobile, heck, remove PhoneGap, just basically start ripping things out until the app doesn't crash anymore. I wasn't able to reproduce this at all on my device.
So - he continued down this path until he came across an incredible discovery. When he removed his CSS file, things worked.
Yeah... CSS. So I had him share his CSS with me and Eclipse, right away, pointed out a few things as invalid. However, my Eclipse IDE is still stuck in HTML2 land so I didn't necessarily trust it. I cleared the errors, built out, and still couldn't reproduce the error myself. But he kept plugging away, until he found it:
.ui-page {
-webkit-backface-visibility: hidden;
}
In case you're curious, this was added due to a recommendation here. Anyway, as soon as he removed the CSS, the application worked perfectly.
Credit for this goes to the user, Jim Nelson of Broadtime.
Raise your hand if you honestly would have thought that CSS could crash an application.
Archived Comments
Woah! That is bat-crap crazy!
wow.......
Wauw and what if you actually need -webkit-backface-visibility: hidden; ???
For this user, he was using it to work around a bug he didn't end up having, so getting rid of it was no big deal.
I also have the same behaviour for an app!! I will try your suggestion and hope it will fix my problem too. Thanks for sharing!
I've just had this scenario - spent a couple of days struggling to figure out why a javascript heavy page was crashing iPad and iPhone browser whenever I zoomed or rotated the device. I gave up a couple of days ago and started redesigning the page so I didn't have to use as much javascript...
Then this morning with a fresh mind I took a second look and started stripping back the CSS, commenting out everything and uncommenting until I found the culprit: -webkit-backface-visibility: hidden; on all section elements.