Border solid problem

[Sukru]

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

 

Video

https://streamable.com/1cc12y

 

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

[Rodrigo]

Hi,

 

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!

[Sukru]

@Rodrigo i understand that when it is 2px, there is no problem, but when it is 1px, there is a browser rendering problem. Thank you very much...