Jump to content
GreenSock

milkaWhat

scale text animation in Chrome flickering and not Firefox

By milkaWhat, in GSAP. Views: 8,182

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

Posted

I've searched the forum and found the history of the Firefox bug and Firefox has fixed the issue. It seems that Chrome is still having the same issue that Firefox once had with the animation flickering. I tried using x, z, rotationZ, force3d, position:relative, and position:absolute used in other topics with flickering animation, but it is proving to be ineffective.

 

In this codepen if you change the minimum time of 0.5 to 5 seconds in line 15 to slow down the animation you'll see the flickering in Chrome.

 

Is there no workaround to this problem and we just need to wait on Chrome to fix this?

 

See the Pen AGzci by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites
Posted

Yeah, my guess is that PointC is right. This seems related to the poor scaling Chrome does with background-images. I filed a report with Chrome the other day. Unfortunately I feel we are at the mercy of Chrome's rendering performance.

  • Like 2
Link to comment
Share on other sites
Posted

Chrome has a known render bug that will sometimes cause a flicker on 3D transformed elements. Since there is a z: 0.01 set on the elements, it is using translate3d() in the CSS transform function for the inline styles of the elements being animated.

 

So you can try adding transformStyle: "preserve-3d", to help prevent this flicker bug. ;)

 

Try changing this:

TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01});

Into this with transformStyle preserve-3d

TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01, transformStyle: "preserve-3d"});

I know that Chrome would stop flickering when that is applied to fix that flicker webkit bug, but also might depend on certain graphics cards hardware configurations.

 

Also sometimes backface-visibility:hidden helps with this webkit flicker bug, but usually only in a non transformed state, or a transform at zero!

 

If it still flickers even with the transformStyle: "preserve-3d" set. That means it is a new flicker webkit bug.

 

Then you can submit your Chrome browser bug here:

 

http://dev.chromium.org/for-testers/bug-reporting-guidelines

 

:)

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

Jonathan, unfortunately "preserve-3d" didn't stop the flickering. 

 

Thanks everyone for the links and advice. I'll keep poking around here and see if any changes happen.

Link to comment
Share on other sites
Posted

Then it must be a Chrome 49 mac bug. It might also affect Windows 10, in Chrome 49. I do not see this behavior on Windows 7, in Chrome 49 though.

 

i would just submit a new bug report to the Chrome bug tracker so they can try and fix it.

 

Go to this link:

 

http://dev.chromium.org/for-testers/bug-reporting-guidelines

 

And then click the link for Report bugs in the first bullet in the list.. Then it will ask you to log in and submit your bug!

 

:)

Link to comment
Share on other sites
Posted

That's weird Jonathan. I'm definitely seeing the problem in Chrome 49 on both Windows 7 and Windows 10. 

Link to comment
Share on other sites
Posted

Craig, that is weird, because i am not seeing it on Chrome 49 Windows 7 (64-bit) .. i tried two separate computers and no flicker :(

 

And just to be clear, we are talking about the element flickering (a visual on and off flash of the elements display) and not jerky jank?

Link to comment
Share on other sites
Posted

I don't know what's happening then. It's Thunderdome out here.

  • Like 1
Link to comment
Share on other sites
Posted

Both computers i tested on Windows 7 in Chrome 49 have AMD Radeon graphics cards which have no flicker, if that helps anyone? Could be affecting Nvidia graphic cards only?

  • Like 1
Link to comment
Share on other sites
Posted

I think you may be on to something there.

 

I've got the flicker on two computers with Nvidia cards, but just tested on another system with an AMD Radeon card (Win10) and it's perfect.

  • Like 1
Link to comment
Share on other sites
Posted

That must be it.. thanks for verifying Craig! :)

 

Because i also notice on my laptop at home, which has Nvidia,  and that is when i see that flicker flack flim flam. So it must be Nvidia graphics cards.. and maybe some other non AMD graphics cards, like Intel graphics cards.

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

Jonathan nice catch!

 

Work Mac with Nvidia graphic card is giving me problems in Chrome. My Windows 10 with Intel® HD Graphics 520 is smooth in Chrome and Edge.

 

I'll have to check Monday what graphic card the other people at work were viewing the animation with. They were on Windows and IE viewing the animation.

  • Like 1
Link to comment
Share on other sites
Posted

I'm getting the background-image scale jank on Chrome 49 mac with a  NVIDIA GeForce GT 650M 1024 MB.  :|

Thanks guys for the thorough detective work.

  • Like 1
Link to comment
Share on other sites
Posted

I have NVIDIA GeForce GTX 770M 3072 MB with an integrated Intel HD Graphics 4600 running on Win10. Chrome, Opera, IE, and Edge are all affected on my system.

 

Not sure how they are all connected, but it's something common among different operating systems and browsers. NVIDIA, Intel, Adobe, or maybe Microsoft with some of their redistributable stuff. 

 

These are the only recent updates to my computer that I can find.

https://support.microsoft.com/en-us/kb/3144756 (Flash)

https://support.microsoft.com/en-us/kb/3140768 (Fonts)

https://helpx.adobe.com/security/products/reader/apsb16-09.html (Acrobat)

 

And an Intel graphics driver version 20.19.15.4331, which I'm still wondering is even the correct one. (blurry text?)

https://www.reddit.com/r/Windows10/comments/44q7ub/windows_10_overwriting_intel_graphics_driver_with/

Link to comment
Share on other sites
  • Author
Posted

The other people here at work are on Windows 7 Intel® HD Graphics 4400 is having problems.

Link to comment
Share on other sites
Posted

OK Fellow GreenSockers,

 

Here is the Chrome bug report for this new Chrome 49 flicker pixel-snapping:

 

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=

 

The more people comment on this behavior in that bug report. The faster the Chrome Dev Team can fix this.

 

I just left my comment in detail describing the behavior. But they didn't know that it is being caused by Nvidia and Intel graphics cards.

 

When leaving your comment make sure you leave the following and any other additional examples if you have them.

 

You need to have a Google account to sign in and leave a comment on this Chrome bug issue tracker:

  1. OS
  2. OS Version
  3. What graphics card (Nvidia or Intel)  you tested in Chrome 49. (make sure they know this)
  4. Any additional examples showing this behavior.

Carl's code example is being used to describe this behavior. AMD Radeon graphics cards seems to be working fine.

 

Hopefully the more info they have regarding this flicker bug, the faster they can fix it.

 

:)

  • Like 2
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account