Bug 285622 – rem unit combined with registered custom property transitions causes layout flickering

• Status: NEW
• Component: CSS

[Devon Govett]

When using CSS transitions to update the background with a registered custom property, if that element also has a size defined with rem units via another variable, it flickers in layout during the transition.

Steps to reproduce:

1. Open https://codepen.io/devongovett/pen/ByBYQXd
2. Hover over the button.

Expected behavior: The background color of the button should transition. Nothing else should change.
Actual behavior: The background color does transition, but the height of the element also flickers.

This is caused by the following CSS, combined with the @property definition:

--height: 2rem;
height: var(--height);

If this variable is inlined (e.g. height: 2rem), then it works fine. Also if the variable uses a different unit (e.g. em or px), it also works fine.

This is affecting Adobe's component library. We are using registered custom properties to enable transitioning gradient backgrounds. This works fine in Chrome and Firefox.

[Radar WebKit Bug Importer]

<rdar://problem/142564982>

[Ahmad Saleem]

It is happening on WebKit ToT (288605@main) as well.

[Simon Fraser (smfr)]

Does this affect any live website?

[Devon Govett]

At least for my work at Adobe, we caught it before releasing. We're likely going to use a `@supports` query to disable the animation in Safari for now.

Unrelated to my work, but fwiw this also affects the latest Tailwind CSS version, which supports transitioning gradients via the same approach and uses rems for sizing by default. https://play.tailwindcss.com/LdiPX6WR31