Replace CSS transition height with transition scale

Question

I am trying to replace my CSS transition(height) with a scale transition for improved performance. This is what I have got:

#primaryNav {
    height: auto;
    transition: transform 0.5s;
}

.nav-small {
    transform: scale(1,0.5); 
}

Now this works really well but the children elements inside .nav-small are also scaling which is a pain - any ideas would be greatly appreciated

Answer 1

Instead of using transform, try using clip, which should net you similar performance to transform in modern browsers. The clip CSS rule works by defining a box that effectively chops off a portion of the element it is applied to.

From css triggers, we can see that changes in height trigger an expensive reflow, repaint, and composite, which is what was likely causing your performance problems. Like changes in transform, changes in clip don't trigger any of these costly browser events. In summary, clip (much like transform) is faster/lighter on browser resources than height, so this may give you the performance boost you're looking for.

To update your existing code, you can use the following:

#primaryNav {
    height: 100px;
    transition: clip 0.5s;
    clip: rect(0px, 0px, 100px, 0);
}

.nav-small {
    clip: rect(0px, 0px, 50px, 0);
}

The only downside is that you need to know the original height of your nav (or get it using JavaScript) so you can set the initial value for clip.