pixeldot Posted August 18, 2022 Share Posted August 18, 2022 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 More sharing options...
pixeldot Posted August 18, 2022 Author Share Posted August 18, 2022 To clarify on our monitors here we are seeing flickering lines between the sections while the scroll is in motion, this issue does not appear if ScrollSmoother is disabled Link to comment Share on other sites More sharing options...
BenjaminO Posted August 18, 2022 Share Posted August 18, 2022 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, }); 1 Link to comment Share on other sites More sharing options...
pixeldot Posted August 18, 2022 Author Share Posted August 18, 2022 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. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 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? Link to comment Share on other sites More sharing options...
pixeldot Posted August 18, 2022 Author Share Posted August 18, 2022 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? Screen Recording 2022-08-18 at 15.10.54.mov 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 18, 2022 Share Posted August 18, 2022 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 1 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