きっかけ

稀に左側の様にレイアウトがバグってる端末の方がいるんですけど原因わかる方いますか？

背景にグレーの枠が付くのはSwiftUIで作ったボタンのみです

🌐と⌨️はUIKitで作ったボタンだから正常

これはSwiftUIのバグなのかな？
仕様なら発動条件がしりたい pic.twitter.com/cBnK5ZQPlD
— SNQ (@_SNQ) February 12, 2022

問題点

おそらくSwiftUIでしか発生しないです

本来

アクセシビリティの「ボタンの形」がオン

上記の画像のようにボタンのレイアウトが崩れてしまいます。

原因

ContentView.swift

Button(action: {
    // 処理
}) {
    Text("Hello, world!")
        .foregroundColor(.white)
        .frame(width: 140, height: 60)
        .background(Color.black)
        .cornerRadius(10)
}

Button自体にframeが指定されていないのが原因です。

解決策

ContentView.swift

Button(action: {
    // 処理
}) {
    Text("Hello, world!")
        .foregroundColor(.white)
        .frame(width: 140, height: 60)
        .background(Color.black)
        .cornerRadius(10)
}
.frame(width: 140, height: 60)

Buttonにframeを指定する事で解決します。
アクセシビリティの「ボタンの形」がオフであればレイアウトに問題ないので正直気付きにくいです。

「ボタンの形」の場所

設定→アクセシビリティ→画面表示とテキストサイズ→ボタンの形