This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jason Nelson
Posted Sep 17 - Read on Facebook

Hey all, another scaling issue. I'm running into this weird bug where my objects scaled above 1 get this pixelated/blurry look in Safari. I don't have this issue with Chrome. (See picture). It does this for vector based assets (fonts, SVG files, etc.). Some quick googling leads me to believe this is a Safari-CSS scaling-Webkit bug. Have any of you found a workaround for this or a fix?

The attached picture is a screenshots of Safari and Chrome rendering scaled SVGs.

6 Comments

Sarath Jayaprakash

Please FIx This Issue, Scaling most using property

Rasmus Andersson

Have you tried opting in to transform-style: preserve-3d ?
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

Jason Nelson

I'm not sure if this has been fixed, but I solved the problem a different way. The reason I was needing to scale was that I wanted to design at base units and then do a global scale based on the DPI of the device. I've since just used introduced a scale variable to every dimension in my prototype. I'm not sure, but I also think Framer tries to handle this natively now.

Jonas Treub

Framer now works in points. If you work you way around the framework you sometimes need to multiply a property with the pixel multiplier. This value is 1 on retina and 2 on non retina screens etc.

print Framer.CurrentContext.pixelMultiplier

Chris Camargo

Easy workaround: start with your object scaled *down*, then scale it back *up* to 1.0, rather than exceeding 1.0.

Jordan Robert Dobson

Yep. That's what I recommend as well.

Read the entire post on Facebook