Jump to content


Blurred image on scale

Moderator Tag

Recommended Posts



I'm trying to scale a div containing an image. The animation is alright and does what I want, but I have a strange blur during the zoom, and after the animation is complete, the image is focused again.


I've linked my codepen, I don't know where it comes from, and I try some fixes, but none of them works.


Thanks for help,


See the Pen xOROEO by Art2B (@Art2B) on CodePen

Link to comment
Share on other sites

Hello Art2B,


That strange blur is a anti-alias browser bug within webkit based browsers.


You either have to add force3d: false to disable the element from being put on it's own rendering layer for 3D hardware acceleration.




You need to make the image the largest it will be, and then when you scale, scale only to a factor of 1. Since that same webkit bug will creep its ugly head in due to animating text or an image above a scale factor of 1.



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.