Chrome下でのスクロールバーでの奇妙なZ-インデックス動作

Question

「固定」配置要素でZ-インデックスCSSプロパティを使用すると、Chromeで奇妙な動作が発生します。

FirefoxとOperaのブラウザが待っていると、Chromeはz-indexプロパティを尊重していないように見え、赤いオーバーレイの上にスクロールバーが表示されます（コードとフィドル参照）。

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

例：http://jsfiddle.net/kvNFW/

OS：Apple社のMac OS 10.8 Google Chromeの：バージョン27.0.1453.93

同じ問題を経験したことがある人、またはそれを修正する方法がある人はいますか？

ご協力いただきありがとうございます。

編集：

問題の概要については、このscreenshotを参照してください。

Answer 1

-webkit-transform: translate3d(0, 0, 0)を追加してみてください。それはモバイルクロムで起こった私の同様の問題を解決します。

Answer 2

私はいくつかの同様の問題がありました。私が見つけた唯一の解決策は、Webkitスクロールバーにいくつかの特殊なスタイルを適用して常に表示することでした。あなたの例を修正してhttp://jsfiddle.net/sinspiral/pTkQL/を参照してください。

これはプラットフォームとの互換性がありません（Windowsではそうしたスタイルも適用されます）ので、実行中のOSを検出する方法が必要です。

.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; 
}