Toolbar SF Symbols Vertically Stretched on a 1x Display
Toolbar images based on SF Symbols are vertically stretched when displayed on a 1x display. I filed this as
FB12928137, but wanted to let other developers know. This is tricky because the effect is subtle and because developers without a 1x display will not see the issue. I worked around it by exporting the SF Symbols as 37-point images and putting them in PDFs in the asset catalog. I made each image 55x55, and centered the symbol graphic inside it.[…]
You can see the effect in the Settings windows of Apple apps, including Apple Mail and Messages.
I noticed this a while ago in Safari and Mail, and now I can’t unsee it. I’m glad that he wrote up the bug.
There are a lot of little glitches like this with 1x displays, and especially when you have both a 1x display and a Retina display connected. Checkboxes in tables sometimes look weird, icons don’t draw using the proper representation, etc.
Top… the 1x rendering of sidebar icons in Apple TV app on macOS.
Bottom, my MiniPlayer with custom drawing (yes, you can use images too if you want)…
Both screenshots rendered on a non-retina display aka @ 1x.
But you can see how if you really care about your app, your icons could be great in both 1x and 2x. Best align to nearest pixel where possible otherwise they look so blurry and marred.
Previously:
Update (2023-08-16): Matt Sephton:
I’m running a non-retina external display again—needs must—and I’m reeling from the lack of attention given to user interface elements in macOS and across Apple’s own apps.
- Finder search button (squished)
- Safari refresh page button (squished and badly positioned)
But most freaky is when switching back to the icon view in System Preferences, where the retina icons are briefly visible before they are all swapped out for the non-retina. Jarring.
I mean seriously… 3 Trillion dollars and you can’t even align icons in the center of the circle.
3 Comments RSS · Twitter · Mastodon
There are apps that allow you to workaround this issue by tricking a @1x display into thinking it is an @2x display. This is what I've been using:
https://github.com/waydabber/BetterDisplay
Still, really hope Apple addresses this!
This is among the myriad of reasons keeping me from upgrading beyond my beloved High Sierra and Mojave. And the same sloppiness is pervasive in the overall design of Apple's UI, not just the implementation. To name just one example, I consider changing macOS over to the portrait-optimized iOS style dialog boxes to be just such a sloppy, inane decision, particularly given that it neither makes any sense nor is done in a consistent manner with not all dialog boxes using that new design.
@Ed I think this issue may come up when you have both a retina and non-retina display running simultaneously. That in particular seems to bring out some more bugs.
I do not see this issue on a Mac Mini M1 with two "1x" displays (hdmi 27" 2560x1440 and usb-c-to-hdm 23" 1920x1080, Ventura 13.5) : https://ee1.nl/misc/toolbar.png