Pencil icon does not zoom out

AI-generated summary

The discussion revolves around a UI issue where the pencil icon does not scale when zooming out using Cmd+- in Safari. tvavrda reports the issue on Meta, noting it occurs in Safari 18.3 on macOS 15.3.1 with the default theme, but not in Chrome. HAWK asks for more details, and tvavrda confirms it’s a Safari-specific problem. awesomerobot reproduces the issue and links to a WebKit bug (199236) that was previously fixed but later reverted. The issue appears to stem from nested font-size declarations affecting SVG scaling, and a potential workaround is suggested: using width/height instead of font-size for SVG icons.

When zooming using Cmd+- the pencil somehow stays original size while everything else zooms out.

3 Likes

I can’t repro that here on Meta, can you? If so, which theme are you using?

2 Likes

This is a screenshot from Meta from yesterday. But I am sorry for my incompetence so here are some more details that are important in these cases:

Theme: Default
Browser: Safari 18.3
OS: MacOS 15.3.1
Mode: PWA (although it does it directly in the browser, too)

I can confirm that it works well in Chrome. So it seems to be a Safari issue.

4 Likes

I can repro this, oddly Safari doesn’t seem to want to scale icons… this doesn’t happen everywhere, it seems to have something to do with multiple nested font-size declarations (which are hard to avoid!)

It looks like this has been reported as a bug, which was at one point fixed, and then reverted recently

Yes, 287302@main reverted the fix. No one is actively working on this bug.

I guess one thing we can do is use width/height instead of font-size on svgs to avoid it

6 Likes