1

Several symbols from SF Symbols render incompletely when displayed within Widgets on iOS 16. The issue affects only symbols not rendered in the default monochrome mode, and it affects some but not all multicolor symbols. It affects all widget families, including lockscreen widgets. The issue is visible both on devices and simulators. Symbols do render correctly within apps, but not within widgets, neither Home Screen widgets nor Lock Screen widgets.

As an example, the following widget screenshots have both been generated with the same code below. The first image shows how the widget appears on iOS 15, the second on iOS 16.

iOS 15iOS 16

VStack {
    ForEach(["cloud.sun.rain",
             "square.3.stack.3d.top.filled",
             "bed.double.fill",
             "battery.100.bolt",
            ], id: \.self) { name in
        HStack {
            Image(systemName:name)
            Image(systemName:name).symbolRenderingMode(.hierarchical)
            Image(systemName:name).symbolRenderingMode(.multicolor)
            Image(systemName:name).symbolRenderingMode(.palette)
                .foregroundStyle(.red, .green, .blue)
        }
    }
}

Has anybody observed the same issue? Do you have a more general workaround?

EDIT 7-Oct-2022: On request of @thedp, here is my workaround for the symbols I need. The result looks ok, but is not ideal. The code sample is incomplete, but I guess the context is understandable. For .accessoryInline widgets I have another workaround.

@ViewBuilder
var view: some View {
    let partial = Image(systemName: base)
        .symbolRenderingMode(mode)
    switch mode {
    case .palette: partial.foregroundStyle(primary, secondary, tertiary)
    case .hierarchical, .monochrome: partial.foregroundColor(primary)
    case .multicolor: partial
    }
}

@ViewBuilder
func widgetView(height: CGFloat) -> some View {
    ZStack {
        let hierarchical = mode == .hierarchical
        switch base {
        case "building.2", "testtube.2", "cloud.sun.rain", "square.2.stack.3d.top.filled", "square.3.stack.3d.top.filled":
            Image(systemName: base)
                .foregroundColor(primary)
            if hierarchical {
                Image(systemName: base)
                    .symbolRenderingMode(.hierarchical)
                Image(systemName: base)
                    .symbolRenderingMode(.palette)
                    .foregroundStyle(.clear, .background, .background)
            }
            view
        case "square.2.stack.3d.bottom.filled", "square.3.stack.3d.bottom.filled":
            Image(systemName: base)
                .foregroundColor(helperColor)
            view
        case "square.3.stack.3d.middle.filled":
            Image(systemName: "square.3.layers.3d")
                .foregroundColor(helperColor)
            Image(systemName: "square.3.stack.3d.bottom.filled")
                .foregroundStyle(primary, .clear, .clear)
                .offset(y: -0.2 * height) // fits approximately
        default:
            view
        }
    }
    .font(.system(size: height))
}
pommy
  • 3,717
  • 1
  • 15
  • 25
  • I'm experiencing the same. On a real device and in preview canvas. There seems to be bugs with some of the symbols, like the `square.3.stack.3d.top.filled` and `bed.double.fill` I suggest you open a radar. Please consider editing your post to include the workarounds you found, so others can resolve this issue until apple resolve's theirs. – thedp Oct 07 '22 at 08:24
  • @thedp I added my workarounds, which are OK but not satisfactory. I don't have trouble with `bed.double.fill` as you do. – pommy Oct 07 '22 at 13:03
  • My mistake, I meant cloud.sun.rain – thedp Oct 07 '22 at 15:26

0 Answers0