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 :

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);