Jump to content


Weird Behavior in Safari (mobile and desktop) HELP

Moderator Tag
Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have this issue where I'm tweening a solid element and while the tween is animation there's a weird white line on the right bottom of the element. Once the Tween is complete the white border disappears. 


The weird part is that it's only visible on safari (mobile and desktop). Please see the code pen for simplified example. 




See the Pen ZOrxbJ by marcfolio (@marcfolio) on CodePen

Link to comment
Share on other sites

  • Solution

That looks like a Safari rendering bug (unrelated to GSAP) when any 3D transforms are applied to the element. By default, GSAP will automatically give you GPU acceleration when animating transforms by promoting the element to its own layer (it does this by using 3D transforms). Apparently Safari doesn't like that you set margin:auto which places it right in the middle, meaning that the border lands on a half-pixel value and it botches the clipping. 


You have two options: either set force3D:false on your first tween (that setting remains intact unless you specifically change it) to remove the GPU acceleration and force the browser to do the rendering on the CPU, or set left:1px on the container instead of 0px (that seemed to fix it for me at least). 

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