iPad 2 Safari shows pixellated html text and images

Question

We are developing an HTML5 + CSS3 application for iPad and iPhone. The app is working fine on iPad & all iPhones, however, iPad 2 shows html dom objects pixellated on startup, and stays like that, sometimes always, sometimes for a few moments.

App is designed for touch and gestures. We used translate3D for hardware acceleration on scrolling objects. We are also using jQuery (v1.7), but the scroller we designed is pure javascript, no frameworks there. jQuery is mostly used in finding/adding/removing dom objects and ajax. Except jQuery everything else is in-house written, including the jQuery plugins we are using.

As i said, animations are achieved by translate3D. For sliding effects we are changing the x or y axis values of the -webkit-transform, and when the touchend event is received, a momentum animation is achieved with javascript, -webkit-transition and translate3D. While app is being written, Apple's iOS Safari documentation is highly used as a guide.

Even though the app is working fine on iPad, iPod Touch (2nd gen), iPhone 3gs and iPhone 4, when it comes to testing on iPad 2 we started to see this pixellated screen. The strangest part is, the 3d accelerated content is the only part that gets pixellated. I've attached two screenshots, one from iPad, another from iPad2. You can see what I meant (they are taken in different times of the same day, so the content is different, sorry for that).

The main content (the boxes with images) can slide up and down with touch events. On iPad2, only this part is pixellated. While sliding, the pixellation stays most of the times, but on some tests it resets after a few seconds.

In addition, the html content has this line in :

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

We are starting the hardware acceleration through CSS, and the main sliding objects has this property :

-webkit-transform: translate3d(0,0,0);

For flicker proofing, images are not inside any dom object that has a background color, and has this property :

-webkit-backface-visibility: hidden;

For more flicker proofing on some cases we used this property (but the pixellated content in the screen capture does not have this one assigned):

-webkit-perspective: 0;

The app does not have 'apple-touch-startup-image' at the moment, so our first thought was that the startup capture ios makes is somehow messed. But it turns out that is not the problem, as after the content is downloaded via wi-fi, pixellation stays the same.

If anyone ever came across to this or a similar problem and was able to solve it, please answer as we have no other ideas left.

I tried to give as much information as I can, and here are the screenshots I've promissed:

iPad :

iPad 2 :

Tutto

After an upgrade to iOS version 5.0.1, the pixellation problem returned. This turned out to be an iOS problem, not the hardware (which is actually great). If anyone encounters a similar problem, a bug report has been filed to Apple, will let you know when the problem is resolved. – Tutto

The bug is named as Safari Blues and is fixed in iOS 5.1 – Tutto

Still seeing this problem on iPad2 in iOS 5.1 in some situations, no time to debug however so will have to fall back to absolute position. – Rizika

We found out that the problem resides in the available memory of the system when you start up Safari. Little available memory for safari means pixellation in every case. Multitasking is the main problem here. The more applications were left open, the less memory for gpu... Try closing all open apps and see if you encounter the pixellation again. – Tutto

Answer 1

Try removing the transform and reapplying it immediately through a timeout:

$("#sliding").css("-webkit-transform: none");
setTimeout(
  $("#sliding").css("-webkit-transform", "translate3d(0,0,0)")
, 0);

Sethrida

we have tried the code in a few locations. and at last, resetting the transform right before initializing our scroller solved the problem. thanks... – Tutto