Jump to content
GreenSock

doboi718

Scaled up text in Safari is blurry

Recommended Posts

Anyone have a fix for blurry text in Safari when it scales up? Safari does the same thing to SVGs but I found if I slightly change the rotation with an onUpdate that fixes the issue. 

blurry_text_safari.jpg.bc2d569691eea3fd473b6557f148e08e.jpg

 

SOLVED - see my post below.

See the Pen bGpPzzP by doboi718 (@doboi718) on CodePen

Link to comment
Share on other sites

Hey doboi718 and welcome to the GreenSock forums.

 

There's only so much you can do because it is up to the browser to render things properly. You can experiment with the text-rendering property to see if it helps. In general you should just try to avoid scaling text, especially slowly where the poor rendering is more visible. And it's always best to scale from a lower scale value to 1 if you can. 

 

Side note: I see you're using the old GSAP syntax. We highly recommend that you use the GSAP 3 syntax so that you can make use of new features. For info on upgrading see this post:

 

Link to comment
Share on other sites

Safari is caching the text as a bitmap to animate, to save on CPU effort. If that bitmap contains the info of the large size, it will look sharp as it scales. So, take the big version, shrink it to start, and scale back up: 

See the Pen MWyMNGz by geedix (@geedix) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks everyone. This issue has been SOLVED - I think. I updated my codepen with the onUpdate function PLUS including the old v1 CSSPlugin.
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.5/plugins/CSSPlugin.min.js
and it not only fixes the font rendering but also fixes the SVG scaling. What is maddening is WHY is this now fixed? What is going on in the plugin that does this and how can we recreate without the 44K plugin? 

@geedix Thanks for idea but my clients often want text scaling up to or from 40x normal size. The issue with starting with a large font is when a 35px font needs to start at 40x then I have to start with a font-size of 1400px - this ends up looking crunchy in Safari and not nicely rendered. 

 

Link to comment
Share on other sites

Ummm...the old plugin won't work with the new core, so I'm not sure what's going on for you there. I looked at your CodePen and nothing was working (I assume you're in the middle of working on it). 

 

Easy solution: add force3D: false to your tween. 

 

Explanation: by default, GSAP uses force3D: "auto" which automatically switches to using a 3D transform during the tween in order to maximize rendering performance (because the browser pushes 3D-transformed elements to the GPU). Pushing it to the GPU basically is like taking a screen-shot of the element at its normal size (a raster image of it) and handing that to the GPU to very quickly manipulate. Different browsers handle things differently (some are better at optimizations than others) and it looks like Safari just lets it get all pixelated. Setting force3D: false tells GSAP to just use a normal 2D transform whenever possible. You pay a price in terms of performance because it's typically not GPU-accelerated, but you get sharper text when you're scaling things up. 

 

See the Pen 29f4e816a730545a426a052ab923fe56 by GreenSock (@GreenSock) on CodePen

 

Does that clarify things? 

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

Thanks Jack - wow do I feel foolish. I have been looking all over the internet for this solution and there it was. I will be updating this CodePen to be a bit more informative for anyone that finds this post. Much appreciated. 

  • Like 2
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.
×