will-change issue Chrome

[fernandofas 11 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

Hello fernandofas, and Welcome to the GreenSock forum!

 

Thanks for sharing

 

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