Weird auto-animation when using gap property

[paoloricciuti]

If you use gap property on a grid or a flexbox and try to auto-animate a remove it weirdly jumps around.

Here's a reproduction in codepen: https://codepen.io/paoloricciuti/pen/YzaRyNV

[justin-schroeder]

There are a few css properties that appear to require a "double paint" at the browser rendering engine level — when the mutation observer gets fired, only 1 of the two has happened. There are some flex layouts and table layouts that also do the same thing. I'm sure what the solution is to these issues but open to suggestions.

[patrikzudel]

It would be amazing if someone would have a list of CSS properties / layout patterns that lead to double painting. I am encountering these jumps when using more complex objects / layouts and its a shame. Finding a fix or a workaround would be amazing!

[clicktodev]

similar problem, you can notice when moving from all to weapons, it happens even with gap turned off

Screen.Recording.2025-05-01.at.3.36.38.PM.mp4

[clicktodev]

is there a theoretical solution to the double paint problem?
this kinda sucks, the library in unusable with flex and grid

[justin-schroeder]

If you find a solution im all ears

[clicktodev]

can you provide more info on the "double paint' behavior?