Font-Awesome
Font-Awesome copied to clipboard
FortAwesome
Zooming on Safari does not scale svg icons
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
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
No issues with pinch-to-zoom:
There seems to be issue with CMD++
I need to investigate on this
@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?
It's to ensure that we inherit the computed font-size from the parent. This sounds like a Safari bug to me.
We're running into this same problem. Has anyone filed a bug report with Apple that we can dupe?
@winzig I have a reduced test case without Font Awesome: https://jsfiddle.net/tagliala/f1Ljqk5b/3/
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.
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
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.
Still an issue for me too. Commenting to see if it gives this bug some traction.
I have custom svg + text wapped by clippath and zoom in/out doesnt scale it.
This seems to be now fixed with FontAwesome 6! 🎉(Happy Release Day, btw)
If you still want to use FontAwesome 5, updating the fontawesome-svg-core to 1.3.0 and fontawesome-common-types to 0.3.0 fixed the issue for me. It seems to be working, but a confirmation from the FontAwesome team that these versions of these packages are fully compatible with 5.15.4 would be nice (although I am not seeing any issues).
Can confirm this icon not scaling on zooming issue still occur in Safari 15.2
Ignore my comment from a few minutes ago, the icons that were not working in FA6 had an fa-sm style attached to them. Without that, it's working! Perhaps this is still considered a bug, but at least I know why it wasn't fully working.
Looks like the issue here is the font-size style on the fa-sm, fa-lg, etc classes. Not sure if that means it's still a Safari bug, or what. We'll need to figure out a work-around to achieve the sizing of those classes without overriding the ability to let safari resize the icons when zooming?
Hi,
Not sure if that means it's still a Safari bug
This is a reproducible test case without Font Awesome: https://jsfiddle.net/tagliala/f1Ljqk5b/3/