transform scaled SVG causes blur?

[Jonathan]

Hello @flysi3000

 

Interesting to know what version of safari for MacOS, iOS or iPadOS version this is being caused on?

 

Not sure if this will help you without seeing your code example, but it has worked for me in the past. You can tell the browser not to render a parents children in 3D space or 3D transforms by adding the CSS property transform-style: flat; to the parent of the troublesome blurry child. Not sure if Safari will honor the spec in this regard, since any parent with transform-style: flat; should not have any of their children using the 3D space or 3D transforms.

 

Keep in mind, very important that technically you add transform-style to the same element your transforms are being applied to since they work hand in hand. But  transform-style  is not inherited so you will also need to apply it to all children (descendants).

 

.parent-element-with-transform {
   transform-style: flat; 
}

transform-style

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

• Indicates that the children of the element are lying in the plane of the element itself.

But best solution is like @GreenSock (Jack) advised to not scale above a factor of 1. Many years ago that became an issue and still is to this day for webkit based browsers. Start your initial scale lower than a factor of 1 and scale your element to its full size of scale 1. That trick works cross browser since even Chrome webkit has this blurry transformed element on <img> tags.

 

But force3D:false should solve this, but Safari plays by its own rules and doesnt follow the spec most of the time.

 

If all else fails just uninstall Safari (kidding)

 

Jonathan

[flysi3000]

Thanks @Jonathan. It was the latest versions of Safari on the latest version of macOS 12, but only on non-retina screens. I seem to have fixed the problem in the interim, using a combination of the fixes suggested above. Interestingly, I tried replicating my problem on

See the Pen qBoxEKX by flysi3000 (@flysi3000) on CodePen

 (with a crap-ified version of the client's artwork), but couldn't get the same blurry scaling issue, though, so ultimately, I'm not sure what was going on!

[Jonathan]

@flysi3000

 

I just tested and confirmed your above codepen on MacOS Monterey Safari 15.3 is working and force3D: false is working.

 

When i remove force3D: false .. Safari does indeed pixelate the SVG making it look blurry with its  anti-alias transform bug. Then when i put back force3D: false, Safari does honor that setting to not force 3D transforms which trigger that browser bug.

 

Have a great day