Posted over 3 years ago. Visible to the public.

Chrome bug: Wrong stacking order when transitioning composited elements

Google Chrome has a subtle rendering bug that hits me once in a while. It usually occurs in sliders with HTML content.

The issue

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 cause

The issue only occurs if:

  • two elements A and B are nested inside an element C
  • A overlaps B (partially or fully, e.g. by using z-index)
  • B is rendered in its own layer[1]
  • C is moved with a CSS transition
  • the transition moves A and B in from offscreen

This is wrong: during the transition, B will overlap A.

How to fix

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 Archive .

Flaky tests are tests that sometimes fail for no obvious reason. They are the plague of many end-to-end (E2E) test suites that automate the browser through tools like Capybara and Selenium.

Join our free training event and learn to fix any flaky test suite, even in large legacy applications.

Owner of this card:

Dominik Schöler
Last edit:
over 3 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more