Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Guest howeller

Safari transform conflicts with tweens

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 am seeing this strange rendering issue in Safari when attempting to run an animation with my CTA button. Upon animating the solid orange background color can flicker or change to blue or stripes. The button pulls the text & colors externally before animation runs. I center the cta button text using transform:translate(-50%, -50%)

and if i remove this the error goes away. Placing force3D:true helped some, but not completely.

Any ideas on how to resolve this conflict?

Screen Shot 2018-05-09 at 11.55.15 AM.png

See the Pen KRQeKg?editors=0010 by howeller (@howeller) on CodePen

Link to comment
Share on other sites

Hm, I can't reproduce that at all. Doesn't sound like it's related to GSAP at all. Maybe try rotating your button very slightly, like 0.1 degree? You might even need to animate that to force the browser to update on each tick. Maybe try setting a transparent border? Just taking stabs in the dark here. :) 

  • Like 1
Link to comment
Share on other sites

I too cannot reproduce it at all.


Safari has an issue with fixed positioned elements and rendering context. You would have to create an explicity rendering context to the said fixed element to make sure it would be placed on the correct z depth. Although I don't think this is the case.


I did find that you are setting up a few too many timelines that could be removed and you seem to be tweening the elements to their natural colour, maybe you want to get rid of that bit and tween them FROM whatever colour you want them. Maybe that'll help?


As @GreenSock said, it's probably nothing to do with GSAP.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thank you for the responses. This is a demo of a much larger build, but stripped until I was able to produce it on Safari 11 desktop (iOS seems okay).  The colors are variable and set externally ( i set statically in the pen for simplicity)

I started noticing this when there was another div that animated over this button. I've added that back into the pen. Maybe  you can see the issue now? I see it on rollover.


Link to comment
Share on other sites

Nope, sorry mate. Still not seeing it.


I'm looking on a Mac 10.13.4 and Safari 11.1


Nothing remotely like what you describing happening here. Maybe your graphics card is being funny? Do you think you could check on another Mac on your end?

  • Like 2
Link to comment
Share on other sites

Interesting. Our QC group discovered this on safari 11.0.3 on OSX 10.11.6 (El Capitan). I am on the same setup and was able to replicate, but haven't checked newer versions. iOS was okay.

I just switched the text positioning CSS from using transform to flexbox and that seems to have cured it.

Thank you guys for checking this out.


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.