[css-height] Is it possible to improve browser rending performance of animating height?

[sdras]

https://www.w3.org/community/webed/wiki/CSS/Properties/height

For the most part, people animating on the web can use transforms and opacity to reduce layout repaint triggers. Animating height is one of the most common use-cases that I've encountered where a transform (even scale) doesn't quite work without a lot of hacks that are fairly precariously balanced. (I can list the workarounds I've found if you would find it helpful).

Is there any possible way to improve the rendering of height or max-height? I believe it would be useful for developers to have a way to animate height without incurring a lot jank- for accordions, dropdowns, and the like. Any consideration here is appreciated.

[grorg]

The problem is that changing height requires a re-layout, and thus cause many things on the page to change their position.

I think your best bet is to hope that browsers (somehow) optimise this in the future. Or provide some way to isolate layout.

[sdras]

Getting browsers to somehow optimize this is where I was hoping to head to- any suggestions on where to file issues to push that forward?

Thanks for any assistance.

[jakearchibald]

@grorg I'm going to push for https://bugs.chromium.org/p/chromium/issues/detail?id=686074 to make this easier in Chrome. It doesn't solve the whole issue, but it goes a long way. Any interest in doing the same at WebKit?