Safari is not scaling SVGs with CTRL+/- zoom when font-size: inherit is used

Originator:tomwinzig
Number:rdar://43425312 Date Originated:17-Aug-2018 08:47 AM
Status:Open Resolved:
Product:Safari Product Version:macOS High Sierra Safari 11.1.2 (13605.3.8) and macOS Mojave Safari 12.0 (14606.1.36.1.3)
Classification:Other Bug Reproducible:Always
 
Summary:
This JSFiddle shows the issue: https://jsfiddle.net/tagliala/f1Ljqk5b/3/

If `font-size: inherit` is used on an SVG to establish the initial sizing of the element, it will not scale in Safari (neither 11.0 or 12.0). This same behavior is not experienced in other popular browsers. Whether or not the font size is inherited from ancestors should have no impact on the scaling of the font at the user’s direction.

Steps to Reproduce:
1. Refer to this JSFiddle: https://jsfiddle.net/tagliala/f1Ljqk5b/3/
2. While on that page, use CTRL+ or CTRL- to zoom in and out, and notice one of the two SVG icons is not scaling.


Expected Results:
Both SVGs should scale. 

Actual Results:
The one with `font-size: inherit` does not scale.

Version:
macOS High Sierra Safari 11.1.2 (13605.3.8) and macOS Mojave Safari 12.0 (14606.1.36.1.3)

Notes:
This notably impacts the popular library, Font Awesome, which recently introduced support for SVGs instead of the traditional font icon technique. The issue is discussed here: https://github.com/FortAwesome/Font-Awesome/issues/13032#issuecomment-413831826

Comments


Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!