Unwanted white space on left of UIScrollView on iPhone X

Question

UIScrollView works fine without the white space on the left on all iPads or iPhones except for iPhone X. How can I remove the white space?

I use storyboards. Bounce On Scroll/Zoom are all disabled. No white space on iPad or iPhone except for iPhone X. I think it might be something related to the Safe Area thing.

I use storyboard. `Bounce On Scroll/Zoom` are all disabled. No white space on iPad or iPhone except for iPhone X. I think it might be something relating to the Safe Area thing... — zs2020, Oct 23 '17 at 00:41
If you set the constraint to go past the safe area and to the end of the super view then it might work but you really haven’t given enough info so it could be many things — Nevin Jethmalani, Oct 23 '17 at 00:44
Share your code and storyboard design. So I can provide you complete solution. — Krunal, Nov 05 '17 at 04:47

AamirR · Answer 1 · 2018-02-05T11:26:00.530

33

This spacing is from safe area, which is applied to left/right of UIScrollview as content insets in landscape orientation on iPhone X, which can be seen using read-only property UIScrollview.safeAreaInsets.

Following line can be used to get rid of safe area insets when you dont need:

UIScrollview.contentInsetAdjustmentBehavior = .never

The default value being UIScrollViewContentInsetAdjustmentBehavior.automatic includes safe area layout guide margins as content insets.

Note: auto layout constraints has nothing to do with the insets, its just iOS 11 UIScrollview content insets adjustment behavior.

edited Feb 05 '18 at 11:26

answered Feb 03 '18 at 21:23

AamirR

11,672
4
59
73

1

Makes no difference to me. My images on my scrollview still are being squished inside the safe area and won't extend to the edges for all sides. – Hedylove Jan 22 '19 at 01:51

Jack · Answer 2 · 2017-11-05T05:23:11.113

5

Setting the constraint relative to safeArea is good practise for iPhone-X. This is how apple says -

When the view is visible onscreen, this guide reflects the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.

In your case you are giving constraints leading & trailing of scrollView with safeArea, Not superView

Hence if you take risk giving constraint to superview instead of safeArea your object content may clipped, specially when you rotate left, content from the left most will clip under top notch of iPhone-X.

Apple doc for safeAreaLayoutGuide

edited Nov 05 '17 at 05:23

answered Oct 23 '17 at 04:18

Jack

13,571
6
76
98

In **iPhone-X**, For prevent object clipped from corner, notch- **iOS11+** comes with `safeArea` – Jack Nov 08 '17 at 03:55
I forget select "Use Safe Area Layout Guides". However I am not able to get the the width of margin of the white bars to the left or right of the safe area. – zs2020 Nov 08 '17 at 04:25
@zsong, You can watch [wwdc2017/204/](https://developer.apple.com/videos/play/wwdc2017/204/) for more reference. – Jack Nov 08 '17 at 05:31
@AamirR see this for VFL https://stackoverflow.com/questions/46479288/swift-safe-area-layout-guide-and-visual-format-language – Jack Feb 03 '18 at 08:54

score 1 · Accepted Answer · answered Feb 11 '18 at 22:57

Well, I solved this issue in non-elegant way. But it works like a charm. (I tried all other answers. Thank for your help, however those answers don't seem to work in my case.)

var leftMargin: CGFloat = 0
var rightMargin: CGFloat = 0

if Device.isPhone() && Device.IS_5_8_INCHES() {
    self.leftMargin = 44
    self.rightMargin = 44
}

let frame = CGRect(
    x: (self.view.frame.width - self.leftMargin - self.rightMargin) * CGFloat(pageIndex),
    y: ...
)

Krunal · Answer 4 · 2017-11-09T10:14:47.517

Safe Area Layout is responsible for this white space.

1st Option:
Ignore safe area layout for your scrollview and set scrollview's constraints with respect to its super view (or main view). Scrollview automatically handle safe area inset for contents while scrolling.

Landscape View:

enter image description here

Portrait View:

enter image description here

2nd Option:
I do not recommend to remove/change safe area layout for your scroll view and an alternate solution that can solve white space visibility issue:

Set blue background color (that you've applied for your scroll view) to your main view of your view controller, if scroll view is covering entire screen.
set clear color background for your scroll view

Add this code in your viewDidLoad

@ IBOutlet var scrollView: UIScrollView!

override func viewDidLoad(){
    super.viewDidLoad()

    self.view.backgroundColor = UIColor.yellow // set here blue color that you've applied for your scroll view 

    self.scrollView.backgroundColor = UIColor.clear 
}

enter image description here

Here are good reference answers regarding Safe Area Layout, for better understanding:

Unwanted white space on left of UIScrollView on iPhone X

4 Answers4