Jump to content
Search Community

SVG scale bug - blurry on Safari

Technics1210 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

Hi,

 

i already read the multiple blurry SVG topics, but it seems for Safari the force3D:false seems not working.

 

I have an outline Text as SVG which is sharp, when not scaled (scaleX:1, scaleY:1).

 

But when I use scaleX:1.5 or >1 the text look blurry, like it takes the original rendered image 1:1 and scales this (bitmap) one.

fontscale=1.5;

// is set at the beginning
TweenMax.set("#txt3", {scaleX:fontscale, scaleY:fontscale, transformOrigin:"top left", force3D:false})
}

tl.insert( TweenMax.set("#txt3", {autoAlpha:0, force3D:false}));
tl.insert( TweenMax.to("#txt3", 1, {delay:2, x:0, autoAlpha:1, ease:Power3.easeIn, force3D:false}) );


Any suggestions?

Link to comment
Share on other sites

Hi Technics1210 :)

 

Have you tried starting with the text at the largest size you will need, set() it to something like scale:0.25 at the beginning and then scale up to 1? I find it's generally much easier to get good results starting with something a bit too big and scaling down rather than trying to scale up.

 

It might be worth a try.

 

Happy tweening.

:) 

  • Like 3
Link to comment
Share on other sites

force3D will not work on SVG since SVG 1.1 does not support CSS 3D transforms.

 

Like PointC advised its always best to scale to a maximum scale factor of 1 to prevent blurry elements due to a webkit anti-alias bug. That webkit bug is a scale bug when elements are scaled above a scale factor of 1. So it is better to always start with the largest your element will be and then scale below 1 on load. And then scale to 1 in your tween. This way you don't have to get affected by this webkit bug.

 

Also a codepen demo will be very helpful to see what your seeing.

 

 

:)

  • Like 2
Link to comment
Share on other sites

Thank you PointC and Jonathan,

 

Yes, I thought so, beginning big - but sometimes at the beginning of your project, you start with something small ;-)

In my case, a dynamic Sitebar banner where I played with the sizes.

 

BUT I thought - with SVGs I will not have this problem, because using the vector data, I will always (!) get a nice rendered sharp image / line.

 

So - one step back. An resave the images...

  • Like 1
Link to comment
Share on other sites

In that case you can try this:

line {
    shape-rendering: geometricPrecision;
}

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

  • auto
    Indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
     
  • optimizeSpeed
    Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.

    crispEdges
    Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
     
  • geometricPrecision
    Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.

The following SVG shape elements can use shape-rendering:

<circle><ellipse>, <line><path>, <polygon>, <polyline>, <rect>

You can control the use of anti-aliasing with the CSS shape-rendering property. Setting this property to crispEdges (on an element or the SVG as a whole) will turn off anti-aliasing, resulting in clear (if sometimes jagged) lines. A value of geometricPrecision will emphasize smooth edges.

 

If this CSS property does not work then it is definitely that anti-alias scale webkit bug.

 

:)

  • Like 2
Link to comment
Share on other sites

  • 5 years later...

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