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:
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".
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:
Here's a visual comparison of the circle
symbol (green) at different scales and sizes, and a reference circle overlayed in Photoshop (red):
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 )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.