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!