While scrolling on an iOS device, the z-index of elements isn't working

Question

My layout is fairly simple, a repeating background element, a couple of vertical spaces (roads) and some horizontal bridges and a little car which should drive underneath th

Answer 1

I believe I've solved this after much trial and error. What I did was add a webkit transform to the bridges. This allows for positive z-index numbers (car at 10, pothole at 1, bridge at 20):

new CSS:

.bridge {
  -webkit-transform: translate3d(0,0,0);
}

Adding the translate to the different bridges seem to not only fix the flicker from before, but also lets you scroll immediately without any delay.

Check it out in full screen or the full Plunker. Tested on iPad iOS 6.0.1.