Google Chrome has a subtle rendering bug that hits me once in a while. It usually occurs in sliders with HTML content.
When a slider contains a composited[1] element, the element will overlap any other element when sliding, being rendered as frontmost element. After the slider has settled, stacking order jumps back to normal.
It seems like Chrome is doing its compositing wrong. This doesn't happen in Firefox.
The issue only occurs if:
z-index
)This is wrong: during the transition, B will overlap A.
I have not found a real fix for this, but a simple workaround is to also force the overlapping element into its own layer with
A
transform: translate3d(0,0,0)
[1] Forcing elements to be rendered in their own layer is a hack that can improve rendering quality and/or performance. It is achieved by adding CSS properties that require the GPU while not altering the effective element styles. A common property is transform: translate3d(0,0,0)
.
Background
Show archive.org snapshot
.