Seltsam z-index Verhalten mit Scrollbalken unter Chrome

Question

Mit z-index CSS-Eigenschaft auf ‚fixed‘ positionierten Elementen gibt mir ein seltsames Verhalten unter Chrome.

Wenn Browser von Firefox und Opera das erwartete Ergebnis liefern, scheint Chrome die Eigenschaft z-index nicht zu respektieren und zeigt die Bildlaufleiste über dem roten Overlay an (siehe Code und Fiddle unten).

HTML:

<div class="left"> 
    <div class="placeholder"></div> 
</div> 
<div class="right"></div> 
<div class="overlay"></div> 

CSS:

.left { 
    background-color: yellow; 
    bottom: 0; 
    left: 0; 
    overflow: auto; 
    position: fixed; 
    top: 0; 
    width: 35%; 
    z-index: 10; 
} 

.right { 
    background-color: orange; 
    bottom: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 65%; 
    z-index: 20; 
} 

.overlay { 
    background-color: red; 
    bottom: 20%; 
    left: 25%; 
    position: fixed; 
    right: 25%; 
    top: 20%; 
    z-index: 40; 
} 

.placeholder { 
    height: 3000px; 
} 

Beispiel: http://jsfiddle.net/kvNFW/

OS: Apple Mac OS 10.8 Google Chrome: Version 27.0.1453.93

Gibt es jemanden, der die gleichen Probleme erlebt hat oder einen Weg hat, das zu beheben?

Vielen Dank im Voraus für jede Hilfe.

Edit:

Sehen Sie diese screenshot für einen Überblick über das Thema.

Answer 1

Sie können versuchen, -webkit-transform: translate3d(0, 0, 0) hinzuzufügen. Es löst mein ähnliches Problem in mobilen Chrome passiert.

Answer 2

Ich hatte einige ähnliche Probleme, und der einzige Weg zur Lösung fand ich war einige spezielle Stile auf die Webkit Scrollbar, um es immer zu zeigen, anzuwenden. Siehe http://jsfiddle.net/sinspiral/pTkQL/ mit Ihrem Beispiel behoben.

Dies ist keine Plattform kompatibel (wie Fenster wird es diese Stile rechnen), so dass man einen Weg finden müssen möglicherweise, vielleicht js, auf dem erkennen OS es ausgeführt wird.

.left::-webkit-scrollbar{ 
    -webkit-appearance: none; 
} 

.left::-webkit-scrollbar-thumb { 
    background-color: rgba(50, 50, 50, .5); 
    border: 3px solid transparent; 
    border-radius: 9px; 
    background-clip: content-box; 
} 

.left::-webkit-scrollbar-track { 
    background-color: rgba(100, 100, 100, .5); 
    width: 15px; 
}