Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Art2B

Blurred image on scale

Recommended Posts

Hello,

 

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,

Arthur

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

  • Like 1
Link to post
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.

 

OR

 

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 post
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.

×