title: While scrolling on an iOS device, the z-index of elements isn't working
body: <p>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.</p>
  
  <p>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 <code>z-index</code> isn't being honoured when the scroll event is active.</p>
  
  <p>This means that as you scroll, the car, which is <code>position: fixed</code> to the <code>window</code>, is moving over the bridge (which has a higher <code>z-index</code> than the "car") rather than the <code>z-index</code> making the bridge higher as it should be and is on non-iOS browsers which makes the car drive under the bridge.</p>
  
  <p>It seems like a simple layering issue, but even with a very simplified test case the bug is still apparent.</p>
  
  <p><strong>Test case: <a href="http://plnkr.co/EAE5AdJqJiuXgSsrfTWH">http://plnkr.co/EAE5AdJqJiuXgSsrfTWH</a></strong> <em>(view in full screen on iPad to avoid a iframe scrolling issue which isn't related to the demo content)</em></p>
  
  <p>Does anyone know what's wrong with the code which would cause the <code>z-index</code> not working while the scroll is active?</p>
  
  <p><strong>Note:</strong> This happens on both, Chrome for iOS and the native Mobile Safari.</p>
  
  <hr>
  
  <p>Here are the code bits running on the <a href="http://plnkr.co/EAE5AdJqJiuXgSsrfTWH">reduced test case</a> I linked to above in case someone can point out a fix without opening the demo.</p>
  
  <hr>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="car"&gt;&lt;/div&gt;
  
      &lt;div class="street"&gt;&lt;/div&gt;
      &lt;div class="bridge"&gt;&lt;/div&gt;
      &lt;div class="street"&gt;&lt;/div&gt;
      &lt;div class="bridge"&gt;&lt;/div&gt;
      &lt;div class="street"&gt;&lt;/div&gt;
      &lt;div class="bridge"&gt;&lt;/div&gt;
      &lt;div class="street"&gt;&lt;/div&gt;
      &lt;div class="bridge"&gt;&lt;/div&gt;
      &lt;div class="street"&gt;&lt;/div&gt;
      &lt;div class="bridge"&gt;&lt;/div&gt;
      &lt;div class="street"&gt;&lt;/div&gt;
      &lt;div class="bridge"&gt;&lt;/div&gt;
      &lt;div class="street"&gt;&lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>