Does 'will-change' or the translateZ() hack improve any performance on 'transition: height'

Question

I am building an accordion with animated height on open/close, in which the content height is calculated via JS. I want to ensure the best performance, so I was thinking about forced hardware acceleration.

.accordion-item-content {
    overflow: hidden;
    transition: height .3s ease;
    transform: translateZ(0);
    will-change: transform;
}

In the Chrome Dev Tools I can see that the accordion-items are each getting a layer (because of the will-change and/or transform property), but will this result in any performance boost? Or are transform, opacity and filter the only properties that can ever benefit from GPU rendering, as I understood here: http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

Another question: Does 'will-change: height' do anything? It looks like it's valid (https://developer.mozilla.org/en-US/docs/Web/CSS/will-change), but it does NOT create a layer, I can observe in the dev tools.

Answer 1

Not really will-change or transform: translateZ() will promote your element to it's own layer which get's send over to your GPU. Have a look at https://csstriggers.com/. You should only animate transform and opacity. Any other properties cause repaint or layout recalculation even if you are using will-change.