I found SwiftUI SF Symbols bug from WWDC24

Summary: At WWDC24, a new transition was introduced by the Apple Design team (.contentTransition(.symbolEffect(.replace))) I was writing a post about it on my LinkedIn (https://www.linkedin.com/in/alex-fila/), and out of curiosity I tried multiple symbols with slashes. Many of them were not well center aligned during a new symbol effect. Some of the examples are: "speaker.fill" : "speaker.slash.fill”, "eye.fill" : "eye.slash.fill”. Please check the attached Swift file for more details and full SwiftUI View with issues.

Steps to Reproduce:

1. Create a new IOS App project in XCode.
2. Create a new SwiftUI File.
3. Initiate state variable: @State private var isSpeakerOn = true.
4. Create a new image with transition:

Image(systemName: isSpeakerOn ? "speaker.fill" : "speaker.slash.fill") .contentTransition(.symbolEffect(.replace)). 5. Create a switcher or set a timer with a constant variable to toggle isSpeakerOn value (see attachment file). 6. Toggle isSpeakerOn value. 7. Observe the issue (2 symbols are not well center aligned during transition).

Expected Results: During transition .contentTransition(.symbolEffect(.replace)) 2 SF symbols ("speaker.fill" : "speaker.slash.fill”) are well center aligned.

Actual Results: During transition (when slash slowly appears on top of SF symbol), the main symbol is moved a few points up, creating a decentralized effect and making the user experience feel inconsistent.

Notes: There are 200 SF Symbols with .slash that might be affected. It happens on latest Xcode and macOS versions, and could be a top priority for the Apple Design Team.

import SwiftUI

struct BUG: View {

@State private var isSpeakerOn = true

let timer = Timer.publish(every: 1.5, on: .main, in: .common).autoconnect()

let columns = [
    GridItem(.flexible(), spacing: 20),
    GridItem(.flexible(), spacing: 20)
]

var body: some View {
    LazyVGrid(columns: columns, spacing: 60) {
        Text("❌").font(.system(size: 100))
        Image(systemName: isSpeakerOn ? "speaker.fill" : "speaker.slash.fill")
            .font(.system(size: 200))
            .frame(width: 200, height: 100, alignment: .center)
            .contentTransition(.symbolEffect(.replace))
            .symbolRenderingMode(.palette)
            .foregroundStyle(
                Color.primary,
                Color.accentColor)
            .onReceive(timer) { _ in
                withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {isSpeakerOn.toggle()}}
        
        Text("✅").font(.system(size: 100))
        Image(systemName: isSpeakerOn ? "bell.fill" : "bell.slash.fill")
            .font(.system(size: 170))
            .frame(width: 150, height: 150, alignment: .center)
            .contentTransition(.symbolEffect(.replace))
            .symbolRenderingMode(.palette)
            .foregroundStyle(
                Color.primary,
                Color.accentColor)
            .onReceive(timer) { _ in
                withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {isSpeakerOn.toggle()}}
        
        Text("❌").font(.system(size: 100))
        Image(systemName: isSpeakerOn ? "eye.fill" : "eye.slash.fill")
            .font(.system(size: 150))
            .frame(width: 200, height: 100, alignment: .center)
            .contentTransition(.symbolEffect(.replace))
            .symbolRenderingMode(.palette)
            .foregroundStyle(
                Color.primary,
                Color.accentColor)
            .onReceive(timer) { _ in
                withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {isSpeakerOn.toggle()}}
    }
    .padding(40)
}}

#Preview { BUG() }