Jess.Park Posted September 8, 2020 Share Posted September 8, 2020 I'm having major issue with this Apparently, Chrome released new version on August 25 (85.0.4183.83) and suddenly my website that I was working on, has a weird glitch whenever it scrolls. It animates fine when not scrolling, but when scrolling, suddenly all divs that animates are glitching and flickering like crazy. It clearly didn't had this issue in previous chrome version. Also it still works fine in Safari. I checked greensock website just to make sure, and it seems like it also has the same kind of glitch when scrolling. (watch the small font paragraphs in greensock video that I've attached.) I've attached both greensock website and my working project video. Please check and provide me some solution. I'm really desperate... chrome_scroll_Glitches_480p.mov chrome_85.0_4183.83_scroll_glitch_480p.mov Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 8, 2020 Share Posted September 8, 2020 Yep, I see the text flickr as well while scrolling. Link to comment Share on other sites More sharing options...
akapowl Posted September 8, 2020 Share Posted September 8, 2020 @GreenSock I can replicate that on Chrome and Edge (Chromium) - nothing to be seen in on Opera so far ( also latest version ). Firefox is fine for me, too. - Windows 10 - Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 Thanks for posting. Chrome really seems to have messed something up here 😕 The error occurs even with old versions of GSAP/ScrollTrigger in the latest Chrome so I'm betting it's NOT related to GSAP. With that being said, we'll try our best to figure out a workaround. I'll be trying to create a minimal demo of the issue, but if any of you are able to provide a minimal demo that'd be helpful. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 Adding will-change: transform, opacity; (since those are the ones being animated) seems to fix the issue on the GreenSock homepage for me. I added the change to our code. Can you please confirm if it's fixed for you? 1 Link to comment Share on other sites More sharing options...
Jess.Park Posted September 8, 2020 Author Share Posted September 8, 2020 Yes! That fixed mine as well. Thank you so much : -) Would it be possible for GSAP to auto apply that style to every animation? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 1 minute ago, Jess.Park said: Would it be possible for GSAP to auto apply that style to every animation? That is possible but it's not a good idea. Applying will-change to every animated element may cause other issues. It's best to use it on an as-needed basis. Link to comment Share on other sites More sharing options...
Jess.Park Posted September 8, 2020 Author Share Posted September 8, 2020 1 minute ago, ZachSaucier said: Applying will-change to every animated element may cause other issues. wow, I didn't know that. To go through all that animating divs and adding that workaround style one by one, it'll be a lot of work I guess...*sad* Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 You can try applying it to all of your elements being animated and see how it performs. If it works, it works Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 9, 2020 Share Posted September 9, 2020 Has anyone filed a bug report for this with the Chrome team? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 8 minutes ago, elegantseagulls said: Has anyone filed a bug report for this with the Chrome team? I haven't. You'll need to create a minimal demo for them if you create one. Link to comment Share on other sites More sharing options...
xoxoxoxo Posted September 10, 2020 Share Posted September 10, 2020 Where do you go about filing a bug report with Chrome? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 10, 2020 Share Posted September 10, 2020 https://bugs.chromium.org/p/chromium/issues/list If you make a minimal demo that recreates the issue I'm happy to post it there. Link to comment Share on other sites More sharing options...
Rekha Posted September 21, 2020 Share Posted September 21, 2020 Hi there! I'm a huge fan of Greensock and ScrollTrigger has been a total lifesaver ! Unfortunately, I'm still seeing this flicker problem on Chrome in some of my projects even with the will-change property specified on the element or container, including on the Greensock homepage. Any idea why this might be? I'm happy to attach a minimal demo of my specific case, but I'm wondering why that didn't fix it for me and it seemed to have worked for others. I'm running the same Chrome version as OP I believe, 85.0.4183.102 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 Hey @Rekha and welcome to the GreenSock forums. You're saying that the flicker on the GreenSock homepage still occurs on your device? That's peculiar. Maybe it has something to do with the hardware specifications. Maybe if you provided some info about your CPU and GPU we might be able to test on similar devices sometime? Regardless I don't know that's there's much we can do at this point - there's definitely a rendering issue in Chrome. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now