Prevent CSS Transform From Making Element Blurry

Here’s the issue I was facing: I was trying to position a sticky header based on the Window scrollY value divided by 2, using the transform: translateY(value)CSS property. As a result, the element would sometimes become blurry. I remembered some workarounds for this by applying the translateZ(0)property, or the backface-visibility: hiddenprop. But my element would still become blurry at times. Then it hit me, that this is caused because sometimes the value is fractional (an odd scrollY value divided by 2), so the browser doesn’t know how to render a fractional position, so it needs to perform anti-aliasing for those cases.

By ensuring that the transform always uses integer values (Math.floor() or Math.ceil()), solved the issue for me.