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!