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.

Gerson

are you using storyboards? have you looked at safe areas? – Dys

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... – Gerson

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 – Dys

Share your code and storyboard design. So I can provide you complete solution. – Turnkey

Answer 1

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: ...
)

Gerson

Answer 2

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.

Trapezohedron

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. – Muzhik

Answer 3

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

Aprilaprile

In iPhone-X, For prevent object clipped from corner, notch- iOS11+ comes with safeArea – Aprilaprile

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. – Gerson

@zsong, You can watch wwdc2017/204/ for more reference. – Aprilaprile

@Trapezohedron see this for VFL #46479788 – Aprilaprile

Answer 4

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:

Portrait View:

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 
}

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

• Safe Area of Xcode 9
• Use Safe Area Layout programmatically

Turnkey