Jump to content
Search Community

Chrome 49 - Janky GSAP

joe_midi test
Moderator Tag

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

if you follow the bug report discussion you can see that they already got their feet moving.. but the fix will probably be in Chrome version 54 .. or a 53 new build update .. hopefully ???

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=

:)

Link to comment
Share on other sites

Just be careful when using perspective and transformPerspective as a fix if not doing 3D transforms. Sometimes it can make worse the thing its trying to fix worse, especially in webkit where its the wild west! Some of the Chrome devs see this as an issue, and the others are fighting tooth and nail trying to push will-change as an option. But i feel eventually they will fix it :)

Link to comment
Share on other sites

Making the rest of us look bad @Oliver15Years!

 

I really don't want to have to switch over to using <img> tags for everything.

Sorry about that Joe, but I had to do something. Beleive me I am really-really upset because they forced us from Flash - which was a visually reliable platform - to HTML . Since then more than a year is went by, and we still struggling with these bugs and exceptions and strange browser behaviours.

  • Like 1
Link to comment
Share on other sites

Hey Folks,

 

If anyone is willing to share links to ads that have been run through AdWords / DoubleClick or any Google-related platform that now look bad in Chrome due to the changes in v53, please share them here or privately PM me (and GreenSock). I think showing how this bug impacts real work that people are paying Google to deliver will help us make our case better. 

 

Thanks!

  • Like 1
Link to comment
Share on other sites

I'm relieved that I am not the only one who ran into this issue. Banners were working fine yesterday at 5:30pm - look crazy this morning.

 

Used the quick <img> switch and it did the trick. Thanks for providing that solution, everyone.

 

Hopefully Google fixes this soon so we can go back to normal!

  • Like 1
Link to comment
Share on other sites

How about this as a temporary fix for this Chrome 53 blur jitter bug.. without using will-change and it's inconsistent behavior

Just add the below to the parent of the element with the transformed background-image:


 

.parent_of_child_with_bg_and_transform_scale {
    -webkit-backface-visibility: hidden;     
    -webkit-perspective: 1000px;
}

I tested this on Chrome 53 on Windows 7 and 10 and it works!

 

Does this help others using Chrome 53 on a Mac/Apple device?

Technically this type of chrome WebKit fix, more of a hack, has been around for several years to help with previous Chrome versions that also produced blurry and jittery scaled elements with text or gradients, but also works for <img> tags and or elements with a background-image.

:)

  • Like 2
Link to comment
Share on other sites

Thats good to know so my above solution only works

 

Sometimes with this bug you can also try adding perspective to the element itself rather than the parent.

.child_with_bg_and_transform_scale {
   -webkit-backface-visibility: hidden;
   -webkit-transform: perspective(1000px);
}

Does that help for OSX Chrome 53?

 

Thanks for checking on your OSX :)

  • Like 2
Link to comment
Share on other sites

Bingo! That works. You're a genius Jonathan. 

 

My code is set up like this:

<div class="grandParent">
   <div class="parent"><img class="image" /></div>
   <div class="parent"><img class="image" /></div>
</div>

and it works if I apply the perspective directly to the <img> tag instead of the parent or grandParent container. 

 

EDIT: I just went back and checked, and apparently all you need is -webkit-backface-visibility:hidden; on the <img> tag.

 

Thanks!

Link to comment
Share on other sites

Glad to help ;)

 

-webkit-backface-visibility should help if you apply a rotation. sometimes Chrome won't render right without it.

 

The <img> tag should work without perspective or transform perspective. That Chrome 53 jitter blur bug only affects elements that use CSS background-image but img tags should not be affected. Basically with perspective you only should use either or. meaning either perspective which gets applied to the parent of the element you want perspective on. Or add transform perspective() on the element itself you want perspective on. In Chrome it is really buggy if you use both on the same element ;)

Link to comment
Share on other sites

Thanks Jonathan. For some reason Im getting the jitter bug using just regular <img> tags, not background-images. There must be another property that I have set to cause it. I'll create a new pen and see if I can reproduce and isolate the problem.

Link to comment
Share on other sites

Ok, here's a codepen that shows my jittery scale bug. It's just a simple jpeg that scales up and down slowly (5s):

 

See the Pen WGkZWO by xgraves (@xgraves) on CodePen

 

The animation is smooth as butter in OSX Safari and FF, but jittery in OSX Chrome 53. It also looks jittery on Windows Chrome 53.

 

If you enable (uncomment) the -webkit-backface-visibility:hidden; on the image tag, then it will play smooth as butter in both Win and Mac Chrome 53.

 

Note that this motion was smooth in Chrome 52, and will probably be fixed in Chrome 54.

Link to comment
Share on other sites

Thanks mr.x,

 

That might be a new Chrome bug for <img> tags that scale.. oh Chrome is so fun :blink: 

 

You can try and let Google Dev team know about this background-image bug also affecting <img> tags when scaled on OSX Chrome 53.

 

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=

 

You will have to log into a google account to comment and let them know about this. Make sure to let them know everything you posted above me. (OS and OS version, etc)

 

Thanks :)

Link to comment
Share on other sites

  • 4 weeks later...

Thats good to know so my above solution only works

 

Sometimes with this bug you can also try adding perspective to the element itself rather than the parent.

.child_with_bg_and_transform_scale {
   -webkit-backface-visibility: hidden;
   -webkit-transform: perspective(1000px);
}
Does that help for OSX Chrome 53?

 

Thanks for checking on your OSX :)

 

 

This will solve the chrome issue but it will make the scaling (to a bigger image) looks blurred in Firefox.

 

I added your chrome fix and opposite fix for Firefox to the parent and is now working fine on my end in both browsers.

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000px;
-moz-backface-visibility: visible;
-moz-perspective: none;

Oh and if anyone is having the same issue of janky scaling animation in firefox. Put this fix directly to the scaling element

transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
Link to comment
Share on other sites

Hello Ginger Soul Records,

 

This Chrome 49 and recurring in Chrome 53 jitter blur bug is affecting elements that scale up and also have the CSS background-image property. The text on that Apple site is HTML text and does not have transform scale on the direct element but on parents and grandparent elements. And it does not have a background-image for that text. Most of the text is using transform translate3d() and not transform scale(). So it is not affected by this Chome bug ;)

 

But any elements that are scaled and have a backgroun-image will be affected by this Chrome 49 / 53 bug.

 

Please see the bug report: 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=

 

:)

Link to comment
Share on other sites

If you use just an <img> tag and not a CSS background-image, then chrome 53 scale jitter bug wont be affected since it only affects scale on a element with background-image. But my solutions above should help you fix the bug if you need to use a CSS background-image on your element. :)

 

One way is to do this on the element: http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65658

.child_with_bg_and_transform_scale {
   -webkit-backface-visibility: hidden;
   -webkit-transform: perspective(1000px);
}

And the other to do this on the parent: http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65415

.parent_of_child_with_bg_and_transform_scale {
    -webkit-backface-visibility: hidden;     
    -webkit-perspective: 1000px;
}

Which ever one works best for you until Google fixes this atrocity :)

  • 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.
×
×
  • Create New...