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 them when you scroll.

Everything works just fine on my Mac but on iOS devices —my testing devices are: iPhone 4 on iOS 6.1, iPad 2 on iOS 6.1.3— the z-index isn't being honoured when the scroll event is active.

This means that as you scroll, the car, which is position: fixed to the window, is moving over the bridge (which has a higher z-index than the "car") rather than the z-index making the bridge higher as it should be and is on non-iOS browsers which makes the car drive under the bridge.

It seems like a simple layering issue, but even with a very simplified test case the bug is still apparent.

Test case: http://plnkr.co/EAE5AdJqJiuXgSsrfTWH (view in full screen on iPad to avoid a iframe scrolling issue which isn't related to the demo content)

Does anyone know what's wrong with the code which would cause the z-index not working while the scroll is active?

Note: This happens on both, Chrome for iOS and the native Mobile Safari.

Here are the code bits running on the reduced test case I linked to above in case someone can point out a fix without opening the demo.

HTML:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="car"></div>

    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
    <div class="bridge"></div>
    <div class="street"></div>
  </body>

</html>

CSS:

body {
  /* Adds the 'road' as a background image. */
  background: #8BA341 url("http://f.cl.ly/items/1r2g152h2J2g3m1e1V08/road.png") repeat-y top center;
  margin:     0;
  padding:    0;
} 

.car {
  /* The car's position is fixed so that it scrolls along with you. */
  position:   fixed;
  top:        5%;
  left:       52%;
  width:      220px;
  height:     330px;
  background: #BD6C31;
  z-index:    1;
}
.street {
  /* Empty in the example, just used to space things out a bit. */
  position:   relative;
  height:     500px;
}
.bridge {
  /* A bridge crossing the main road. The car should drive under it. */
  position:   relative;
  height:     353px;
  /* Image of repeating road. */
  background: url("http://f.cl.ly/items/0u0p2k3z45242n1w3A0A/bridge-road.png") repeat-x center left;
  /* Higher z-index than car. */
  z-index:    2;
}

Just in case anyone else stumbles upon this question… while the original question hasn't been answered entirely (I still don't know why the normal z-index stacking order isn't being used properly) the solution to get things to work is using a negative z-index for background elements and the car itself. So car is negative, overpass/bridge is on a positive z-index and then iOS renders it correctly. — Jannis, Apr 18 '13 at 22:41
I'm having the same issue and your negative z-index solution does indeed the trick but it unfortunately raises another problem: negative z-indices on tags breaks the links. Thanks for sharing anyways, I'll do my part if I find something but I'm quit stuck right now. — ChristopherC, Aug 10 '13 at 13:11
I keep looking for a workaround, but meanwhile here are the results of some investigations: http://plnkr.co/aeubN4 If I'm correct, I'm not sure if there's anything we can do about it? — ChristopherC, Aug 11 '13 at 07:59

score 59 · Answer 1 · answered Aug 14 '13 at 18:58

59

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.

answered Aug 14 '13 at 18:58

Lost Left Stack

1,932
13
14

4

I started to give up after days of struggling but your solution is working great in my case me as well, thanks! – ChristopherC Aug 15 '13 at 13:09
Bizzare bug, your solution fixed it for us too! – Nick Price Aug 31 '13 at 16:51
Awesome. Works greats! – Pratheep May 23 '14 at 08:09
OMG! I spent a week trying to get jplayer to work with reveal.js The play button link would not fire when touched on the iphone (links worked on the ipad, firefox, chrome, everything else, but ios). Your CSS trick solved my problem. Thank you!!!!!! – TryHarder Jun 05 '14 at 10:39
My entire organization says thank you. Come grab a beer if you'll ever travel Israel. – Dima Grossman Mar 02 '17 at 14:15
Bless you stranger – Jason Kao Mar 19 '19 at 19:46
4

This is stopped working on ios 12.2 any suggestion here ? – Kishore Kumar Apr 12 '19 at 08:29

score 0 · Answer 2 · answered Dec 08 '22 at 15:39

0

What solved the issue for me was making sure that the items in the DOM were in descending order based on the z-index value. So the items I needed on top was z-3 and was listed first, then the z-2 item, then z-1. Hope this helps someone else!

answered Dec 08 '22 at 15:39

Eric Schenkenberger

1
2

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

2 Answers2

Linked