Jump to content
GreenSock

fernandofas

will-change issue Chrome

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

 

I just an article on the GSAP Blog about the "will-change" and Chrome issue with scaling images and after copying the codepen provided in the article I started to play around a solution that possibly could help lots of devs around.

 

So, if you read this article http://greensock.com/will-change, you will see that the first image get blurry when scaling.

 

I added "transformPerspective" and "z" properties on the animation and the scaling goes smoothly and works well.

 

I have been using it for a while now and I hope you guys can find it useful as well.

 

See the codes modified here: 

 

 

Kind regards,

 

Fernando Fas

 

 

See the Pen jVyEpg by fernandofas (@fernandofas) on CodePen

Link to comment
Share on other sites

  • Solution

Hello fernandofas, and Welcome to the GreenSock forum!

 

Thanks for sharing :D

 

If you go to this topic you can see the progression of this bug that started in Chrome 49 and reappeared in Chrome 53.

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/

 

Various solution to fix this bug:

 

This applies to the parent of the element with the bg image:

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65415

 

This applies to the element itself with the bg image:

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65658

 

And the Google Chrome bug report page of this ongoing bug:

 

https://bugs.chromium.org/p/chromium/issues/detail?id=596382&can=2&start=0&num=100&q=chrome%2049&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

 

Happy Tweening :)

  • Like 1
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.
×