Jump to content
Search Community

Scrollsmoother and sub-pixel lines between elements

pixeldot test
Moderator Tag

Recommended Posts

Hi all, We're looking to implement the ScrollSmoother plugin into the sites we build moving forward but running into an issue with what appears to be sub-pixel rounding on elements. Our boilerplate is rather more complex but the simple codepen attached shows the same behaviour despite being super simple. Is there something I'm missing? 

See the Pen 034abe45de10bbc0f6699f0687567a58 by unitedus (@unitedus) on CodePen

Link to comment
Share on other sites

Hello @pixeldot, I can see that you didn't create the wrapper element as described in the doc. You can try this in the HTML :

<body>
  <div id="wrapper">
    <div id="content">
      <div class="section"><p> a section</p></div>
      <div class="section"><p> a section</p></div>
      <div class="section"><p> a section</p></div>
    </div>
  </div>
  <!-- position: fixed elements can go outside --->
</body>

and then create the ScrollSmoother instance like this  :

ScrollSmoother.create({ 
            normalizeScroll: false,
            smoothTouch: 0.01,
            ignoreMobileResize: true,
            content: '#content',
            wrapper: '#wrapper',
            smooth: 1,             
            effects: true,         
        });

EDIT:

 

You can follow the convention by naming the content : smooth-content and the wrapper : smooth-wrapper which allow you to skip the declaration when creating the instance :

<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <div class="section"><p> a section</p></div>
      <div class="section"><p> a section</p></div>
      <div class="section"><p> a section</p></div>
    </div>
  </div>
  <!-- position: fixed elements can go outside --->
</body>
ScrollSmoother.create({ 
            normalizeScroll: false,
            smoothTouch: 0.01,
            ignoreMobileResize: true,
            smooth: 1,             
            effects: true,         
        });

 

  • Like 1
Link to comment
Share on other sites

Thanks @Benjamin0, that's an oversight when I did the quick codepen. ScrollSmoother will generate the wrapper if it's not declared anyway.

 

Our project uses custom ids for both elements and we declare those when we create the instance. 

 

For clarity I've edited the codepen to use the default ids for ScrollSmoother and the issue persists.

  • Like 1
Link to comment
Share on other sites

Hey Cassie,

 

42 minutes ago, Cassie said:

Yeah, ScrollSmoother creates the wrapper anyway. That's not the issue.

I'm not seeing any flickering - have you maybe tried will-change transform on the sections?

Yeah I just tried that without any success. I've also tried applying data-speed="1" to the sections themselves without any effect.

 

What I get is a flickering hairline between the sections when they are in motion. I'm guessing its a sub-pixel rendering issue.

 

Attached is a quick video, hopefully you can see the issue there? 

 

  • Like 1
Link to comment
Share on other sites

So this is really a browser rendering thing so there's not a huge amount GSAP-wise we can do. But here's some other options I would try 

 

  • change the background of the container to black too?
  • add a 1px outline or border to the sections?
  • add a teeny tiny rotate to the sections


maybe one of those incantations will help? Such a bummer, sorry, browsers are so weird sometimes
 

  • Like 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.
×
×
  • Create New...