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:
Create a new IOS App project in XCode.
Create a new SwiftUI File.
Initiate state variable: @State private var isSpeakerOn = true.
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() }