【SwiftUI】ShapeStyleのopacityの濃さがOSバージョンによって変わる

はじめに

SwiftUIはOSバージョンによって動きが変わることがよくあります笑

最近はなかなかなく、安定してきたかなと思っていたら遭遇しました。

ちなみに、原因は全くわかりません。
記事を見て何かわかった方はコメントください。

何が起こるのか

以下は同じコードで実行したものです。
明らかに透明度が異なります。

左からiOS15.5、iOS16.0、iOS17.0です。

発生条件

• foregroundStyleでAnyShapeStyleを使用する
• AnyShapeStyleに対してopacityで透明度を変更する

コード

import SwiftUI

struct ContentView: View {
    private let textStyle = AnyShapeStyle(Color.red)

    var body: some View {
        VStack {
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(1.0))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.9))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.8))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.7))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.6))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.5))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.4))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.3))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.2))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.1))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.0))
        }
    }
}

対策1

AnyShapeStyleの使用をやめることで解決します。
しかし、どうしてもAnyShapeStyleを使わなくてはいけない場面では対策になりません。

import SwiftUI

struct ContentView: View {
    private let textStyle = Color.red

    var body: some View {
        VStack {
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(1.0))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.9))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.8))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.7))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.6))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.5))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.4))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.3))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.2))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.1))
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle.opacity(0.0))
        }
    }
}

対策2

Textに対してopacityを付与する。
Viewの透明度を変更することで同じ結果が得られると思います。

import SwiftUI

struct ContentView: View {
    private let textStyle = AnyShapeStyle(Color.red)

    var body: some View {
        VStack {
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(1.0)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.9)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.8)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.7)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.6)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.5)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.4)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.3)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.2)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.1)
            
            Text("Hello World!!")
                .font(.title)
                .foregroundStyle(textStyle)
                .opacity(0.0)
        }
    }
}

おわり

中間バージョンだけ挙動が違うのは珍しい気がする