Loading…
6
That 1px gap on my hover state cost me a full Sunday
I spent hours chasing a weird line between two divs, turned out my transform scale was rounding to a fraction and leaving a sliver. Added a tiny translateZ(0) and it vanished, has anyone else hit this kind of pixel rounding thing with transitions?
1 comments
Log in to join the discussion
Log In1 Comment
the_ben11d ago
The translateZ(0) trick works but it is more of a band-aid than a real fix. What is actually happening is the browser is rounding the subpixel position during the transition, and the gap shows up because the element is still technically moving. A cleaner way to handle it is to make sure your transform ends on a whole pixel value to begin with, or set a small amount of margin on the element that sits behind so the sliver has somewhere to hide. I have spent way too many hours on that same line before, so I get the pain.
4