Laggy animation when (un)collapsing cards

[aimeos]

OS: Ubuntu 14.04, Browser: Firefox 48 (but browser independent)

When opening/closing nested cards, the animation is choppy due to the
.card-block{ padding:1.25rem; }

https://jsbin.com/geyenovizo/edit?html,output

[tomlutzenberger]

Can confirm! (Same OS/Browser)

[netowp]

Same thing using Chrome on a late 2012 iMac.

[cvrebert]

Can we blame the browser vendors, or is a legit reason for padding to be bad when animations are involved?

[tomlutzenberger]

The problem doesn't appear if you either set box-sizing: content-box or disable the padding. (Did this just for testing purpose and problem isolation).

It might be a calculating issue in the collapse.js

[eliottrobson]

I have seen the same thing many times on many different websites with varying implementations. I'd go as far as saying that wrapper elements would be a good use case for animations when padding is concerned.

[mdo]

Can we blame the browser vendors, or is a legit reason for padding to be bad when animations are involved?

We can blame them, but it's an issue with how they height is being calculated. It pulls the height, then adds/removes the padding I believe. This has been a problem for us since we coded v3 fwiw.

Fix inbound though.