• Please complete the contact form below with details about your inquiry and I'll get back to you as soon as possible.

  • This field is for validation purposes and should be left unchanged.

Tag: css

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.

SVG animation with stroke-dashoffset happening backwards on Safari

If you’re running into this issue, I’ll save you some time: Safari does not support negative values for stroke-dashoffset . Rewriting the values into positive ones will solve the issue.

If this still doesn’t solve the issue for you, make sure you don’t have the  animation-direction: reverse set on your animation.

If you found this helpful, let me know in the commentary section below 🙂