Emojis are not properly rendered in accented widgets on iOS 18

Question

Created Aug ’24

Replies 3

Boosts 1

Participants 5

Hello,

When I turn on tinted mode on iOS 18, I noticed that the emojis in the widgets are not rendered properly. The widget in the following screenshot is the template project created by Xcode 16.

Screenshot 2024-08-23 at 11.00.52.png

Answered by michaltuma in 802039022

Thanks, Gong, for sharing this workaround, it was very helpful! It inspired me to create a slightly simpler solution without having to convert the emoji to an image. The key is the .luminanceToAlpha() modifier. Additionally I had to add a black background, otherwise the edge was jagged. But the background is transparent in the end result.

Text("😄")
   .background(Color.black)
   .compositingGroup()
   .luminanceToAlpha()

Boost

Answer 1

Gong OP

Aug ’24

Workaround:

Convert to image.

// widgetRenderingMode == .accented
Image(uiImage: "😄".toImage(fontSize: size))
    .resizable()
    .scaledToFit()
    .luminanceToAlpha()

2

Answer 2

Engineer OP

Apple

Aug ’24

Our engineering teams need to investigate this issue, as resolution may involve changes to Apple's software. I'd greatly appreciate it if you could open a bug report, include your findings and post the FB number here once you do. Bug Reporting: How and Why? has tips on creating your bug report.

Rico

WWDR - DTS - Software Engineer

0

Answer 3

michaltuma OP

Aug ’24

Accepted Answer

Thanks, Gong, for sharing this workaround, it was very helpful! It inspired me to create a slightly simpler solution without having to convert the emoji to an image. The key is the .luminanceToAlpha() modifier. Additionally I had to add a black background, otherwise the edge was jagged. But the background is transparent in the end result.

Text("😄")
   .background(Color.black)
   .compositingGroup()
   .luminanceToAlpha()

2