SecureField on macOS shows artifacts while typing

When combining a SecureField and a TextField in a view, and using padding, you will see view-artifacts while typing in either the TextField or the SecureField. If you change the SecureField to a TextField, or remove the padding, you will not see the artifacts.

The following example code reproduces the problem

struct TextFieldTestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .frame(width: 800, height: 800)
        }
    }
}

struct ContentView: View {

    @State var username: String = ""
    @State var password: String = ""

    var body: some View {

        VStack(alignment: .leading) {

            Text("Username")
                .foregroundColor(.black)

            TextField("Username", text: $username)
                .textFieldStyle(.plain)
                .disableAutocorrection(true)

            Text("Password")
                .foregroundColor(.black)

            SecureField("Enter password", text: $password)
                .textFieldStyle(.plain)
        }.padding(.horizontal, 68)
    }
}

While typing a shadowed outline sometimes appear under the field you are typing in:

This only happens on macOS.

I have this issue as well on macOS 12.5. Good to know that padding can play a role. I have not been able to find a practical work-around; for example, using Rectangle instead of padding brings the artifact back. Reportedly, the artifact is gone in macOS 13 beta https://stackoverflow.com/a/73615876/668253.

SecureField on macOS shows artifacts while typing
 
 
Q