Safari and chrome rendering differences

Hello everyone - I am hoping all of you are staying safe! I regret that I cannot link to the files I am speaking about, the test servers are behind the firewall.

I have a hype project that has three layouts, and persistent symbols and everything is working well. the concept I went with was mobile first - small items and small layout requirements first. Then I built the desktop layout, used the scale tool to size the symbol up, its working OK. all of the elements are svgs and there are no rasterized items in place. once the two layouts were working, I then created the third one that asks you to rotate the phone for the best case use. so good! its working.

When building and testing with chrome / console log and watching all the variables as I go, its working as expected. The edges are crisp and they look nice. when I placed this on the test server, and started testing from safari (not for code response or expected functionality but instead for aesthetics and responsive appearances) I noticed that where I scaled symbols up there appears to be a degraded quality, almost like you would expect from a raster image despite the fact that I have taken extra care to use scalable vectors.

Has anyone else experienced this and how did you solve this?

thank you!

Well, I can look past that, as I don’t like downloading files anyway... but I too am at a disadvantage. I’m using my iPad instead of my Mac. It is on the other side of a regular wall and I’m too lazy to get up and go to it.

I regret nothing :crazy_face:

Anyway, what setting do you have for... Position with CSS left/top ...maybe uncheck that, see if it makes a difference.

1 Like


thank you!

I was searching for the wrong terms yesterday, and this clarified things right away. The first suggestion that I followed worked, unchecking the graphics acceleration was exactly what needed to happen. I appreciate you pointing me in the right direction, thank you!

1 Like