Jump to content


black line at the junction of sections / ScrollSmoother

Recommended Posts

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

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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






Link to comment
Share on other sites


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


Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

  • Thanks 1
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.