Mobile Safari not rendering HTML5 app correctly

In the past, web developers bemoaned having to implement workarounds and hacks to deal with older versions of Internet Explorer.

Lately we’ve experienced a spate of problems with Safari on iOS devices. A quick search turns up that Safari on iOS 7 is the buggiest Safari version since 1.0. Although I didn’t discover the particular issue and solution discussed here, this is something our team has been struggling with for a few days and the solution is strange.

A mobile web application, which works fine on Chrome on Android, was having strange rendering issues on Safari on iOS devices. In particular, the page would arbitrarily partial render and stop. However, “bumping” (scrolling the status bar, or any other small scroll attempt) would complete the rendering. The rendering would freeze in different places and at different times, but bumping would always resolve the issue.

A lot of searches turned up fruitless and the issue was very frustrating. The main developer on the project discovered there was an issue with refresh on iOS 7 related to the size of the page. We tried hacks like those described on the lazy repaint page, to no avail.

Finally, the developer determined that while the page was loading, the changing of DOM elements was causing the page to attempt to scroll, which disrupted the rendering of DOM elements. Apparently, the “bumping” interrupted that process and allowed the render to complete (not exactly sure how that worked though).

For some reason, setting the viewport of the page resolved the issue. Note that setting only the width causes the app to work fine in landscape mode but not portrait mode.

<meta name="viewport" content="width=device-width, height=device-height">

I’m sure there’s a better explanation, but for now, we’re writing this as a weird Safari iOS 7 mystery bug.

One thought on “Mobile Safari not rendering HTML5 app correctly

  1. I believe that safari pauses all javascript execution and DOM changes while scrolling. This is by design so that when a user is “scrolling” or “touchmoving” the page isn’t making unnecessary calculations. They figure that the browser doesn’t need to show you anything until you lift your finger from the device. This is all great, however, when the page is loading and adding elements to the DOM the scroll event was firing. Safari needs the “scrollstop” event or “touchend” event to trigger to resume javascript execution and DOM refreshing or repainting. This event was not getting fired when the page was loading only the scroll event causing the load to just hang. Adding the above meta tag stopped the scroll event from firing allowing the app to load correctly. I believe this was the reason that it worked, but I could be wrong.

Comments are closed.