Hey, just a short article to explain a bug I encountered during my devs on a webapplication. For some reason I could not explain or understand the application tend to « freeze » on my iPhone when doing some really stupid onClick() event.

In the end, the simple execution of this code was crashing/freezing :

$(« mydiv »).click(function(){
alert(« test »);
});

I searched all around, used jslint.com and so more. For some mysterious reason it worked perfectly on Android or on my Laptop. I finally found the culprit to be my CSS style sheet !

Thanks to luck, I found that it worked in landscape mode ! (not in portrait mode), it made searching easier…

For some reason I had a section for detecting « landscape mode » on mobile browsers, and it was wrong. It was a very simple operation dealing with a title’s size :

@media( max-width: 800px ){
#header_title{
font-size: 20pt;
}
}

Unfortunately, during jQuery’s animations for show/hide or somewhat, it must mess with the max-width of the content, triggering this css conditions and/or doing something fuzzy that Safari does not like that much.

Changing max-width:800px into « landscape » fixed my bug :

@media(orientation : landscape){
#header_title{
font-size: 20pt;
}
}

Now, I does not claim to be a pure & talented webapp coder, but nevertheless I believe today’s browsers are definitely NOT helping in chasing problems in a webpage, these unexpected freezes does not trig any error message or anything, even using the live debugger (connecting via usb iPhone to Macbook and using macbook’s safari to remotely debug the mobile’s safari).

If you ever encounter the same problem, I hope this short article helped !