Font-awesome: Zooming on Safari does not scale svg icons

[ghost]

Describe the problem

Go to any examples of the svg icons and zoom in and out in Safari (https://fontawesome.com/how-to-use/svg-with-js for instance) -- the icons do not scale.

What did you expect?

SVG icons to scale with browser zoom.

What version and implementation are you using?

Version:
Browser and version: Safari 11.1, macOS High Sierra

• [x] SVG with JS
• [ ] Web Fonts with CSS
• [ ] SVG Sprites
• [ ] On the Desktop

Reproducible test case

https://fontawesome.com/how-to-use/svg-with-js

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Cannot replicate on iOS 11.3.1. Could you please provide all the information required by our bug report template, including OS?

Please make sure that your request follows our bug report template

Meanwhile, closing here

[ghost]

Updated the OP.

[tagliala]

No issues with pinch-to-zoom:

There seems to be issue with CMD++

I need to investigate on this

[tagliala]

@SeriousLemon thanks for reporting this, I can confirm

I have a reduced test case without font awesome, I don't know if this could be considered a browser bug: https://jsfiddle.net/tagliala/f1Ljqk5b/3/

The problem is in the font-size: inherit property of .svg-inline--fa which is preventing Safari from scaling up icons.

@robmadole what is the purpose of that css rule on an <svg> element?

[robmadole]

It's to ensure that we inherit the computed font-size from the parent. This sounds like a Safari bug to me.

[winzig]

We're running into this same problem. Has anyone filed a bug report with Apple that we can dupe?

[tagliala]

@winzig I have a reduced test case without Font Awesome: https://jsfiddle.net/tagliala/f1Ljqk5b/3/

[winzig]

I've filed a bug report with Apple (rdar://43425312). You can view the open radar version of it here: https://openradar.appspot.com/radar?id=5024734567727104

It would help them prioritize this issue if everyone here that has an Apple dev account could dupe the bug report. Using Brisk makes it very easy. There's a menu option to "Duplicate Radar":

Then you just enter "43425312", it pre-fills my report, and you can either just submit it or add your own comments. (Yes, unbelievably this is how they prefer to prioritize bug reports!)

To install Brisk from Terminal:

brew cask install Brisk

You'll then find it in your Applications folder.

If you don't have brew installed, refer to the brew page.

[winzig]

Oh and thanks to @tagliala: I referenced your test case in the report.

[nortonandreev]

Still not fixed in Safari 14...

[winzig]

Sad that it's still an issue. Quite a while ago one of the Safari devs recommended I report the bug via webkit.org so I did at that time, here it is: https://bugs.webkit.org/show_bug.cgi?id=199236

[nortonandreev]

I reported it via the Feedback Assistant yesterday and for similar reports it says “More than 10”. It might be useful if people who have Apple Developer account report it via the Feedback Assistant too.