Jump to content
Search Community

SVG weight change when tweening bitmap behind it (in Safari)

cwiens test
Moderator Tag

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've encountered the same bug with text in Safari.  Setting foce3D to false in the Greensock code fixes it, or setting -webkit-font-smoothing: antialiased; in the CSS also works.

 

To turn off force3D for the whole banner:

CSSPlugin.defaultForce3D = false; 

Converting the type within the SVG to outlines would also be a good idea for more consistent appearance across browsers.

  • Like 3
Link to comment
Share on other sites

Just to clarify, this is not a GSAP bug, but a WebKit antialias bug. WebKit Apple and Blink (Chrome) Webkit are very bad at transforming elements with img tags and text font. Due to a webkit bug in the z-axis even when at 0 for CSS 3D transforms. That is why setting force3D: false resolves this browser bug!

 

:)

  • 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.
×
×
  • Create New...