{"id":40347,"date":"2023-08-15T15:35:57","date_gmt":"2023-08-15T19:35:57","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=40347"},"modified":"2023-08-16T10:29:43","modified_gmt":"2023-08-16T14:29:43","slug":"toolbar-sf-symbols-vertically-stretched-on-a-1x-display","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2023\/08\/15\/toolbar-sf-symbols-vertically-stretched-on-a-1x-display\/","title":{"rendered":"Toolbar SF Symbols Vertically Stretched on a 1x Display"},"content":{"rendered":"

John Brayton<\/a>:<\/p>\n

\n

Toolbar images based on SF Symbols are vertically stretched when displayed on a 1x display. I filed this as FB12928137<\/code>, 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.<\/p>\n

[…]<\/p>\n

You can see the effect in the Settings windows of Apple apps, including Apple Mail and Messages.<\/p>\n<\/blockquote>\n

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.<\/p>\n

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.<\/p>\n\n

Mario Guzmán<\/a>:<\/p>\n

Top… the 1x rendering of sidebar icons in Apple TV app on macOS.<\/p>

Bottom, my MiniPlayer with custom drawing (yes, you can use images too if you want)…<\/p>

Both screenshots rendered on a non-retina display aka @ 1x.<\/p>

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.<\/p><\/blockquote>\n\n

Previously:<\/p>\n