I have this bug that I haven't been able to figure out. My button on the right of my view get infinitely expanded over safe area when I add a spacer in the middle of my container.

Here you can see the view expand under the dynamic island and until the border of the screen. Safe area is ignored and I don't know why.

Now the related code to this view is :

struct FighterView: View {

@Bindable var fighter: Fighter

var body: some View {
    
    HStack {
        
        TextField("", text: $fighter.name, prompt: Text(fighter.color.rawValue).foregroundStyle(Color.black.opacity(0.1)))
            .myModifiers
        
        ZStack {
            // Those views are not visible on the screen shot

            PenaltyView(color: fighter.isHansokumake ? .jSred : .jSyellow)
                .hidden(fighter.shido == 0 && !fighter.isHansokumake)
            
            PenaltyView(isTilted: true)
                .offset(x: 15, y: 0)
                .hidden(fighter.shido != 2 || fighter.isHansokumake)
            
        }
        
        // This is the spacer that I commented on the second screen and make the button the right size
        Spacer()

        DoubleTapButton(tapAction: {
            
            fighter.isIppon = true
            
        }, doubleTapAction: {
            
            fighter.isIppon = false
            
        }, title: fighter.ipponString)
        .buttonStyle(PointButtonStyle())

        DoubleTapButton(tapAction: {
            
            fighter.addWazaari()
            
        }, doubleTapAction: {
            
            fighter.removeWazaari()
            
        }, title: "\(fighter.isIppon ? 0 : fighter.wazaari)")
        .buttonStyle(PointButtonStyle())
    }
    .foregroundStyle(fighter.color.primary)
}

}

Any tip or lead would be much appreciated as I'm almost done with this project but this I can't figure it out.

I have this bug that I haven't been able to figure out. My button on the right of my view get infinitely expanded over safe area when I add a spacer in the middle of my container.

Here you can see the view expand under the dynamic island and until the border of the screen. Safe area is ignored and I don't know why.

Now the related code to this view is :

struct FighterView: View {

@Bindable var fighter: Fighter

var body: some View {
    
    HStack {
        
        TextField("", text: $fighter.name, prompt: Text(fighter.color.rawValue).foregroundStyle(Color.black.opacity(0.1)))
            .myModifiers
        
        ZStack {
            // Those views are not visible on the screen shot

            PenaltyView(color: fighter.isHansokumake ? .jSred : .jSyellow)
                .hidden(fighter.shido == 0 && !fighter.isHansokumake)
            
            PenaltyView(isTilted: true)
                .offset(x: 15, y: 0)
                .hidden(fighter.shido != 2 || fighter.isHansokumake)
            
        }
        
        // This is the spacer that I commented on the second screen and make the button the right size
        Spacer()

        DoubleTapButton(tapAction: {
            
            fighter.isIppon = true
            
        }, doubleTapAction: {
            
            fighter.isIppon = false
            
        }, title: fighter.ipponString)
        .buttonStyle(PointButtonStyle())

        DoubleTapButton(tapAction: {
            
            fighter.addWazaari()
            
        }, doubleTapAction: {
            
            fighter.removeWazaari()
            
        }, title: "\(fighter.isIppon ? 0 : fighter.wazaari)")
        .buttonStyle(PointButtonStyle())
    }
    .foregroundStyle(fighter.color.primary)
}

}

Any tip or lead would be much appreciated as I'm almost done with this project but this I can't figure it out.

• ios
• swift
• swiftui
• size

2 Answers 2

This problem may be happening because you are using a .background modifier to set the background inside PointButtonStyle and this is ignoring the safe area edges by default. Something like :

.background(myButtonBackground)

This goes to background(_:ignoresSafeAreaEdges:)

• If the background is in contact with a safe area edge then it will extend into that safe area.
• When you add the Spacer, it pushes the button to the edge and makes contact with the safe area in this way.

To fix, try supplying an empty set of edges to ignore:

.background(myButtonBackground, ignoresSafeAreaEdges: [])

Alternatively, just change the round parentheses to curly braces:

.background { myButtonBackground }

This goes to background(alignment:content:) instead, which does not ignore the safe area by default.

If that doesn't fix it, please show how PointButtonStyle is implemented.

Try to give a .frame(width: size, height: size) to your expanded stack.