Sign In With Apple Button stretches to occupy entire window

Hi all!

When building with macOS 14 SDK in macOS 14 RC, the Sign In With Apple button(SignInWithAppleButton) stretches its background to occupy the entire window content view. We expect it to be in the area with a red stroke(see the screenshot)

Here's the code:

struct ContentView: View {
    var body: some View {
		SignInWithAppleButton(.signIn, onRequest: { $0.requestedScopes = [.fullName, .email] }, onCompletion: { _ in })
			.signInWithAppleButtonStyle(.black)
			.border(Color.red, width: 3)
			.padding(80)
    }
}

And screenshot:

One important addition: the button works, and its hit area remains within that red rectangle.

Any help is highly appreciated.

Thank you!

Post not yet marked as solved Up vote post of eyen Down vote post of eyen
768 views
Posted by
eyen
Reply

  • Seeing same issue in a AppKit app, so unrelated to SwiftUI. Seems the view is correctly positioned, but there is a sublayer of the control that is completely messed up, filling the entire window. Clicking in the place that the button should be does actually sign you in, but the visuals are completely off. Has to be a bug on Apple's side I would guess.

    —
    derby
Add a Comment

Replies

We're seeing the same thing, pretty bad this made it into the RC of Sonoma. Is there already a radar you have filed, and/or even better, a workaround or hack you found that puts that layer in check?

Posted by
mekentosj
Post not yet marked as solved Up vote reply of mekentosj Down vote reply of mekentosj
Add a Comment

We're seeing the same, no workarounds yet. Reported: FB13214392

Posted by
reddavis
Post not yet marked as solved Up vote reply of reddavis Down vote reply of reddavis
Add a Comment

Experiencing the exact same issue.

Posted by
li-xinyang
Post not yet marked as solved Up vote reply of li-xinyang Down vote reply of li-xinyang
Add a Comment

Found a simple workaround with SwiftUI:

Applying a clipShape appears to bring the layer under control.

You'll also need to set the width as after applying the clipShape, it will still fill the width.

SignInWithAppleButton(
    .continue,
    onRequest: { request in
        request.requestedScopes = [.email]
    },
    onCompletion: { result in
        // Whatever...
    }
)
.clipShape(RoundedRectangle(cornerRadius: 4, style: .continuous)) // Workaround here...
.frame(width: 300) // ...and here
Posted by
reddavis
Post not yet marked as solved Up vote reply of reddavis Down vote reply of reddavis
Add a Comment