Hành vi chỉ mục z lạ với thanh cuộn trong Chrome

Question

Sử dụng thuộc tính CSS z-index trên các phần tử vị trí 'cố định' mang lại cho tôi một hành vi lạ trong Chrome.

Khi trình duyệt Firefox và Opera cung cấp cho tôi kết quả chờ đợi, Chrome dường như không tôn trọng thuộc tính z-index, hiển thị thanh cuộn phía trên lớp phủ màu đỏ (xem mã và Fiddle dưới đây).

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

Ví dụ: http://jsfiddle.net/kvNFW/

Hệ điều hành: Apple Mac OS 10.8 Google Chrome: Phiên bản 27.0.1453.93

Có ai đó gặp phải sự cố tương tự hoặc có cách khắc phục sự cố đó không?

Cảm ơn trước vì đã được trợ giúp.

Edit:

Xem screenshot này cho một cái nhìn tổng quan về vấn đề này.

Answer 1

Bạn có thể thử thêm -webkit-transform: translate3d(0, 0, 0). Nó giải quyết vấn đề tương tự của tôi đã xảy ra trong chrome di động.

Answer 2

Tôi đã có một số vấn đề tương tự và cách duy nhất để giải quyết mà tôi tìm thấy là áp dụng một số kiểu đặc biệt cho thanh cuộn webkit để luôn hiển thị nó. Xem http://jsfiddle.net/sinspiral/pTkQL/ với ví dụ của bạn đã được sửa.

Đây không phải là nền tảng tương thích (như trên cửa sổ nó cũng sẽ áp dụng các kiểu đó), vì vậy bạn có thể cần phải tìm cách, có thể js, để phát hiện trên hệ điều hành nào đang chạy.

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