'SwiftUI: Button with image got gray border on real iPhone but works fine on simulation mode

I'm trying to make simple app, the app seems working well on simulation mode, but test on my iPhone the button looks different from simulation iPhone,

link the simulation picture here,

enter image description here

this is the what I see on the simulation but real iPhone looks

enter image description here

please, check the pictures linked,

The button image made on sub View struct and called as a Button label,

plus I tried borderlessbuttonstyle, back and foreground color match both super, and child view. I got nothing, here the code,

I don't know how to delete the gray border not only these buttons but also all buttons that I used with image labeling looks the same way - bordered with gray rectangle,

here the button code

struct MainList: View {
@EnvironmentObject var pageControl: PageControl
var body: some View {
    VStack{
        Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 0
            print("button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[0])
                .background(.white)
         }
        .buttonStyle(BorderlessButtonStyle())
        .foregroundColor(.white)

and this is the View that used to button label

struct mainListRow: View {
var actuator: Actuator
var body: some View {
    HStack(alignment: .center) {
        Image("home")
        Spacer()
        VStack {
            ZStack{
                RoundedRectangle(cornerRadius: 10.0)
                    .frame(width: 60, height: 30)
                    .foregroundColor(.red)
                Text(String(actuator.speed) + " %")
                    .foregroundColor(.white)
            }
        }
    }
}

}

here add the another picture when I change the background color

enter image description here

as you can see that those three buttons, for the top button without background color, the button area is filled gray color, if I add background color - second button, it only filled inside, so I changed the background color to button field with black then the border color changed. thus I add the background color with white at button field not working - third button :(. the tested phone is iPhone Xs. this is really weird as I mentioned it work fine on simulation. please. test it on real iPhone.

here the code for third picture,

            Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 0
            print("button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[0])
        }
        .buttonStyle(BorderlessButtonStyle())
        Divider()
        Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 1
            print("Rotate button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[1])
                .background(.white)
        }
        .background(.black)
        Divider()
        Button{
            pageControl.pageNum = 1
            pageControl.detailPage = 2
            print("Rotate button pressed pageNum: \(pageControl.pageNum), startPage \(pageControl.detailPage)")
        } label: {
            mainListRow(actuator: actuators[2])
                .buttonStyle(BorderlessButtonStyle())
        }
        .background(.white)

and the the button page added to main here

struct testPage: View {
var body: some View {
    MainList()
        .frame(width: 330, height: 150)
        .padding(.top, 20)
}

}

Solution 1:^[1]

in MainList get rid of:

            .background(.white)

Solution 2:^[2]

The gray/overlay on the button is from the button "tint".

To remove it, add the .plain modifier:

Button {
}
.buttonStyle(.plain)

As of today there is a bug in Xcode and that's why you can't see the tint properly in the simulator or the preview.

More examples of workarounds here:

https://hackingwithswift.com/quick-start/swiftui/how-to-disable-the-overlay-color-for-images-inside-button-and-navigationlink

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ChrisR
Solution 2	whitneyland

'SwiftUI: Button with image got gray border on real iPhone but works fine on simulation mode

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]