iOS SwiftUI: ScrollView ignore top safe area

Question

I have a shared view in my app that can be called in different places. The root of this view is a scroll view, but sometimes it ignores the top safe area and it collapses under the navigation bar.

Here two screenshots that shows better the problem:

As you can see in the second screenshot the scrollview extends for all the screen collapsing under the navigation. How can I avoid this?

can't provide the code due to privacy, but i've fixed with .navigationViewStyle(StackNavigationViewStyle()) — Andrea Miotto, Dec 02 '19 at 10:38

Ihor Vovk · Answer 1 · 2020-11-23T18:41:27.263

27

Adding .padding(.top, 1) to the scroll view will solve the issue.

edited Nov 23 '20 at 18:41

answered Nov 23 '20 at 18:33

Ihor Vovk

551
6
11

Not a perfect solution but it does solve the issue. How would you do it so the navigation header gets pinned during scroll? – Arunabh Das Jan 30 '22 at 21:22

score 6 · Answer 2 · answered Dec 08 '21 at 23:45

I had a similar issue with the List inside NavigationView and ignored the bottom safe area. What helped me was setting the list bottom padding to some non zero value, like this:

.padding(.bottom, 1)

It looks like a bug and this issue still exists on iOS 15.2

score 5 · Answer 3 · answered Mar 05 '22 at 16:46

5

Ihor Vovk's solution works perfectly, but if you don't want a visible padding, just change it to .padding(.top, 0.1). (I tested and 0.1 is the smallest possible value that makes it work)

answered Mar 05 '22 at 16:46

Tamás Sengel

55,884
29
169
223

0.1 doesn't work for me. 0.2 does work however, but it's noticeable. 0.15 works too, and while still noticeable it is much more discreet than 0.2. It might vary between devices though. I have only tested on one. – KPM Feb 23 '23 at 22:51

score 1 · Accepted Answer · answered Dec 02 '19 at 10:37

1

Solved using:

.navigationViewStyle(StackNavigationViewStyle())

in all the NavigationView

answered Dec 02 '19 at 10:37

Andrea Miotto

7,084
8
45
70

1

Does anybody have another solution? This didn't work for me – Melissa Guzman Oct 27 '20 at 12:21
It's not working. – Yi-Hsiu Lee Sep 21 '21 at 11:10
This doesn't work as it only changes some unrelated property of the NavigationView style on iPad. It has nothing to do with the problem. – Unterbelichtet Jan 14 '22 at 12:30
Works for me. Must be applied to the NavigationView itself, not to the content within. – KoCMoHaBTa Mar 06 '23 at 20:37

score 1 · Answer 5 · answered May 27 '23 at 16:23

Think in a simpler way, you will be surprised please use modifier .clipped() -> The problem is that the scroll view is allowing its content to overflow, like the masksToBounds property in UIkit, the padding(.top, 1) solution above is also a way to prevent the content from overflowing.

score 0 · Answer 6 · answered Mar 03 '21 at 14:33

You can solved it by giving padding to scroll view

ScrollView {
    VStack(spacing: 0) {
      
        Text("test")
        Text("test")
        Text("test")
        Text("test")
        Text("test")
        
    }
}
.padding(.top, UIApplication.shared.windows.first!.safeAreaInsets.top )

iOS SwiftUI: ScrollView ignore top safe area

6 Answers6