Zoom on SVG - Rough Edges

[Chris Riminton]

I am trying to zoom an SVG by using scale to have the effect that you are zooming in on the letter and viewing through it to watch a video. This is very much inspired by the apple site and how their site animations work. 

 

For chrome when you zoom the edges are really crisp and it looks great. However when loading the same in safari or on iOS devices the edges of the SVG are really rough and jagged. I've tried using force3d:false with no luck. 

 

To replicate visit https://capsule.dev-zeroabove.co.uk/ and scroll down the page. The black C will start to zoom.

 

I've also included some screenshots of the difference between browsers. 

Any help would be great.

See the Pen by (@) on CodePen

[PointC]

Have you tried shape-rendering?

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