Interesting PhoneGap/Android crash

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Mikel posted on 3/2/2012 at 4:21 AM

Woah! That is bat-crap crazy!

wow.......

Comment 2 by Benz posted on 3/6/2012 at 1:53 AM

Wauw and what if you actually need -webkit-backface-visibility: hidden; ???

Comment 3 by Raymond Camden posted on 3/7/2012 at 4:38 AM

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.

Comment 4 by Daniel posted on 5/9/2013 at 8:29 PM

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!

Comment 5 by Kelly Dyson posted on 5/13/2013 at 2:49 PM

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.