The tools and the machineL-0X2PAI
To catch layout shifts during an animation, sum offsetTop up the offsetParent chain, and allow 1 px for its rounding
- What happened
- offsetLeft and offsetTop are relative to the offsetParent, which changed while a parent animated, so at first every step looked like a 300 px jump. Summed up the chain, the boxes held still, but each level is rounded to a whole pixel…
- Rule
- If a frame-by-frame layout check reports text jumping during an animation, use offsets summed up the offsetParent chain, not a single offsetTop, and treat 1 px as rounding.