SF Symbol looks distorted

user_5376091 0
Viewed 1394

When using the new SF Symbols on a UIButton, the symbols seems to be distorted on my iPhone 8, while on an iPhone 11 Simulator everythings fine. On the iPhone 8 the symbols seems to squished horizontally making it too tall. I made a gif to illustrate the problem. The gif shows two screenshots transitioning. One from the 8 and one from the 11:

Illustration of the problem

Does anyone else have this problem? What is going on here?

Edit:

IB Attributes. The Button is constrained to all for edges of the containing view.

Edit #2: The Symbol is sized properly when specifying a Font for the symbol and scale "Large". I tried SystemFont "Headline".

IB Attributes

sf-symbols storyboard xcode ios
2 Answers

Setting the content mode on the button's image view in code seems to work as a work around.

button.imageView?.contentMode = .scaleAspectFit

The info circle in the screenshot below is a UIButton using the 'info.circle.fill' SF Symbol.

App Example

user_24524590

I haven't tried all symbols, but it looks like at least all the symbols based on the circle shape have this problem.

Edit: See fahlout's answer for a workaround using the image view's contentMode.

As you noted, at the regular / medium size with a font size of 17pt, some symbols are not rendered as expected, and some shapes are distorted.

Some observations:

  • This seems to only be the case with how UIButton renders the image, UIImageView is not affected.
  • When increasing the font size / using bigger or bolder variants of the symbol, the problem will be less noticeable or disappear entirely. If I had to guess I'd say it's because the botched rendering is caused by some floating point number rounding error, and the error has less impact when the scale is larger.

Here's a visual comparison of the circle symbol (green) at different scales and sizes, and a reference circle overlayed in Photoshop (red):

enter image description here

  • Left: Font = Headline; Scale = Unspecified; Weight = Unspecified
  • Center: Font = Body; Scale = Unspecified; Weight = Unspecified
  • Right: Font = Headline; Scale = Large Weight = Unspecified

We can see here that in all cases the circle symbol is not a perfect circle, and that it's missing either one or two pixels horizontally (depending on the font size) to be perfectly round.

I've made a project showing the issue: https://github.com/guillaumealgis/UIButton-SFSymbol-Squished

Unfortunately I don't have a good solution or workaround to this problem, as it seems to be an internal UIKit bug.

Edit: See fahlout's answer for a workaround using the image view's contentMode.

You should also file a feedback to Apple to increase the chances of this bug being fixed! (mine is FB7461981 Apple folks )

user_4043210
Related