black line at the junction of sections / ScrollSmoother

[Romanus 3 Likes (Newbie)]

Hey! A black line appears when scrolling.

 

#smooth-content {
  will-change: transform;
}

It did not help

See the Pen mdjzWeY by romanusname (@romanusname) on CodePen

[Cassie 5,162 Likes (Superhero)]

I can't see this I'm afraid - steps to recreate along with the browser and OS you're on would be helpful, maybe a video too?

[Romanus 3 Likes (Newbie)]

The problem is in all browsers. The latest update.

Recently reinstalled windows. windows 10 x64 I have an old laptop.

I have used ScrollSmoother only this laptop. The problem has always been. And before reinstalling windows and in older browsers. If i disable ScrollSmoother there is no problem

https://youtu.be/UR9r3gXmhQM

https://youtu.be/zWOfxmm5Cts

 

[Romanus 3 Likes (Newbie)]

 

It is very strange. There is a black line on the video even when I'm not scrolling. And the line is not visible in the screenshots.

The line in the second video is also visible in the screenshot

[elegantseagulls 1,430 Likes (Superhero)]

This definitely seems like an issue with how your browser renders sub-pixels on your monitor (since it is using transforms, subpixel positioning will be present). Try a -1px margin-bottom to see if that fixes the issue. I'm not able to see the issue on my machine.

[Romanus 3 Likes (Newbie)]

I split the sections and the problem went away (margin-top:100px).
There is no problem with the yellow background. But with a blue background, a black line again!
The sections don't even touch.

[Romanus 3 Likes (Newbie)]

I googled about sub-pixels rendering. Problems appear when pixel values are fractional. Is it possible to add such a setting to ScrollSmoother?

[Romanus 3 Likes (Newbie)]

[GreenSock 18,293 Likes (Superhero)]

This is not documented (and is considered experimental), but if you want to force ScrollSmoother to use whole pixel values, just add this to the config: 

wholePixels: true

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

[Romanus 3 Likes (Newbie)]

Unfortunately it didn't help. With this setting, the problem didn't change at all.
But I was able to get rid of the problem. That's what I understood.

 

The problem in video 1 and video 2 are different problems.

 

To solve the first one, you need to choose colors.
section1: green, section2: blue - black line.
section1: yellow, section2: red - no problem.
Also, many shades of blue do not cause problems.
section1: green, section2: #3399ff - no problem.
#3399ff - similar to blue.

 

The second problem is visible with svg elements.
To solve it, you need to move the second section 1 pixel up.

 

It turns out the first problem creates a line, and the second problem creates a gap.

Problems appear only in ScrollSmoother.

I don't know what I will do when I buy another computer. I won't be able to track these issues

[GreenSock 18,293 Likes (Superhero)]

Thanks for sharing your findings. 

 

20 minutes ago, Romanus said:

Problems appear only in ScrollSmoother.

I'm a bit confused by that comment. Do you think this is actually related to ScrollSmoother? I can't imagine how. Are you saying no other smooth scrolling library has a similar problem? It's only ScrollSmoother? Have you tried others? Do you have a comparison? It sure seems like this is just a graphics rendering thing with browsers. If you think there's something we can do with ScrollSmoother to somehow improve things, I'd be happy to consider your suggestions. 

[Romanus 3 Likes (Newbie)]

I haven't tried other libraries for smooth scrolling. I'm a Gsap fan
In the latest version of Google Chrome, scrolling is smooth by default on all sites and there is no such issue.

This plugin is more than just smooth scrolling. These are very convenient and beautiful functions (speed, lag, paused )
I have no idea how to fix this because I don't even understand why this is happening. There is no pattern in colors. Close shades have different behavior