Jump to content
Search Community

Border solid problem

Sukru test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello, vibrations occur in the borderline with the scrollsmoother plugin. To resolve this "will-change: transform;" I used it but the problem persists. Can you help me?


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


"* { will-change: transform; }" > As soon as I apply this the page is completely broken css





See the Pen mdQQemG by sukruemanet (@sukruemanet) on CodePen

Link to comment
Share on other sites

  • Solution



I believe that this is more a rendering glitch on Chrome than a GSAP issue. 


As you can see in this example I made the border 2px and added an extra element on top (<hr>) in order to keep the border to 1px:

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

The issue is still there, but I don't see it on Firefox, just on Chrome.


This is a fork of the same pen but without the <hr> tag, the 2px border looks good and there is no flickering neither on Chrome nor Firefox:

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


If you want your border to be just 1px you'll have to find some way to mimic it using maybe an image, SVG or canvas.


Hopefully this helps

Happy Tweening!

  • Like 3
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...