ScrollSmoother: Flashing Lines or Background Color Between Divs

[Benk]

Ok, so I have a bunch of sections that are scrolling nicely, but they show a thin line of the background color in Chrome on Mac as you scroll. Tested on Safari and it works as expected.

 

Chrome

Version 108.0.5359.124 (Official Build) (x86_64)

 

MacOS

13.1 (22C65)

See the Pen eYjGpLg?editors=0100 by jimmywilson (@jimmywilson) on CodePen

[GreenSock]

Yeah, that's a browser rendering issue. Annoying, I know. It appears to fix things if you just set will-change: transform on the thing that's moving: 

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

 

Thanks for being a Club GreenSock member! 💚🥳

[Benk]

No luck with this solution... Maybe on the wrong element? I used it on <section>.

[GreenSock]

Did you not see it fixed in my forked demo? I added it to the #smooth-content element. 👍

[Benk]

Lol. Thats how you know it's time for bed
Totally skipped the solution.
 

Many thanks.

[GreenSock]

Ha ha. No worries. Been there, done that. Got the T-shirt. 

[Adam Alexander]

This background-image / background-color leak scrollsmoother (adding keywords for future travellers) glitch was killing me, glad my google-fu paid off, I was just about to post same question! 

[Blender Media]

I am still having this issue.

 

I've added will-change: transform; to our #smooth-content div as well as ensure gsap.min.js and ScrollTrigger.min.js are using the most recent version (3.12.2) and redownloaded ScrollSmoother.min.js to use the newest version (3.12.2) as well.

 

I'm still getting the flickering between sections, and on horizontal borders and line breaks.  Its seems more predominant in Google Chrome browser (update to date) but am unable to find anything related to this bug in the GSAP forums (beyond this thread).

Any help would be greatly appreciated.

 

[Rodrigo]

Hi @Blender Media and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock!

 

Do you have a minimal demo that we can take a look at?

 

Without something to play with and if the will-change is not working, maybe see if you have a ScrollTrigger instance with some value on scrub other than true. Also try using a negative margin-top of 1px on your elements to see if that helps.

 

Happy Tweening!

[Blender Media]

Hey @Rodrigo,

Thanks for the quick reply.

This is as minimal as I could go.

You can see it happening between .marquee and main elements.  Its also happening above the four column stats number below.
 

[Blender Media]

Hey again @Rodrigo,

I randomly think adding position: relative; to <main> helped the top one. Still can't quite figure out the border flash with the other instances.

[Rodrigo]

Hi,

 

This has nothing to do with either GSAP or ScrollSmoother I'm afraid.

 

Removing these styles from your marquee__banner element seems to solve the issue:

.marquee__banner {
  /* animation: scrolling 20s linear infinite; */
  /* animation-play-state: paused; */
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
  z-index: 1;
}

 

Hopefully this helps.

Happy Tweening!

[Blender Media]

Thanks @Rodrigo,

 

Thats actually for a JS effect I didn't include in the demo I linked.

 

However, that secondary flashing of the horizontal border on .blender-statistics seems to go away when I remove GSAP.

Any insight into the element?

 

Thanks a lot for your continued help and support.

[Rodrigo]

8 minutes ago, Blender Media said:

However, that secondary flashing of the horizontal border on .blender-statistics seems to go away when I remove GSAP.

Remove GSAP from where? The entire project?

 

In the latest update of your codepen I can't see any lines anymore.

 

Unfortunately your example has over 200 lines of HTML and over 1500 lines of CSS, the problem could be somewhere else and we just don't have the time resources to comb through all that in order to find where the issue could be.

 

In the previous iteration I was able to see the line between the top element (with the gray gradient) and the About Us section (white). That line disappeared when I commented out those styles in your CSS. But now that line is gone I can't see it. Also I can't see any other line so I'm a bit lost here.

 

The line in .blender-statistics disappears when you comment out the border-top property

.blender-statistics {
  /* border-top: 1px solid var(--very-light-pink); */
  padding: 56px 0 64px;
}

Happy Tweening!

[Blender Media]

@Rodrigo,

 

Thanks for all the help and patience.

 

I appreciate the insights and will keep combing through and trying to figure out the issue.  I removed gsap from the project and the main.js file to see if the flickering stopped.  It seems to be isolated to SmoothScroller but i'll post back here if I figure it out. It seems to only happen in Chrome.

 

Thanks again.