Jump to content

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

scale not working correct in safari

Recommended Posts

Hi there,


I want to change scale of headline after scroll, in all browsers works correct except Safari and the quality of the headline tag decreases. ( The photo you see in the attachment).I have written my code as follows:


TweenMax.to(".textVideo h2", 300, { scale: 6})


When I change the CSS in inspect Element as follows;


-webkit-transform:scale(0.9, 0.9);

it works correct in safari (The second photo) , how can i solve this issue?

Bildschirmfoto 2020-07-22 um 13.28.57 (1).png


Share this post

Link to post
Share on other sites

Hey Nima. Most likely this has nothing to do with GSAP, it just relates to how browsers render text. You're likely to get varied results depending on the browser, OS, device, and monitor. But without you providing a minimal demo it's hard to say for sure.


If you want text to scale perfectly it's best to use SVG instead. That way it will scale perfectly instead of approximating like what's done with regular web page text. 


Side note: You're using the old v2 formatting for GSAP. We highly recommend GSAP 3! It's super easy to upgrade so that you get the smaller file size, sleeker API, and a bunch of new features:


  • Like 1

Share this post

Link to post
Share on other sites

Safari is rasterizing it for performance.

gsap.to(".textVideo h2", { 
  scale: 6,
  duration: 300,
  force3D: false


  • Like 4

Share this post

Link to post
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.