iOS Safari Locks Up and Freezes When Clicking on Input Box

This happens to me during one of my projects and I caught it pretty late. It really caused some serious headache. The scenario is this, I was building a web application which has a lot of elements. Basically the screen displays tabular data with lots of prices information being displayed. Now this is well and good, when a user clicks on one of the prices I switch the screen with a form element with some input fields in it. In this scenario, the page does not actually change, rather the tabular data is being hidden temporarily.

The horror happens when someone uses safari in an iPhone, running iOS7. As soon as they touch on the input box, it took iOS up to 1 minute until it brings up the on-screen keyboard. This is truly the “what the…” moment.

Turns out, Safari on iOS has a “bug” that caused it to use so much processing power whenever there are large amount of elements being hidden using the css property display: none.

So the solution was to hide the tabular data differently. I basically forced the element enclosing the tabular data off the device viewport. The css rule looks like these (let’s call the enclosing div tabular-data for this example):

After using the above method to hide the tabular data, iOS Safari was happy. Everything runs quick again and it brings up the keyboard for the input boxes just like normal.

I really hope this post help you if you encounter the same issue.

Some references:

http://stackoverflow.com/questions/19335109/ios-7-safari-os-locks-up-for-4-seconds-when-clicking-focusing-on-a-html-input

http://stackoverflow.com/questions/22471951/safari-iphone-ios-7-freezes-on-input-text-focus

Categorised in: Coding, CSS