Grey bar appearing under Navigation bar after segues Swift

Question

A grey bar exactly the size of my navigation bar + status bar appears under my navigation bar when I segue to the specific VC. In another VC the grey bar isn't there unless I open Youtube then use the iOS 9 "back to 'App'" button.

Here is what it looks like:

As you can see from the picture, the grey bar is not covering the YTPlayerView but is instead shoving it down.

What is going on here?

EDIT

I added the view hierarchy for clarity.

EDIT

I added the constraints for the YTPlayerView in question.

EDIT

Constraint to top layout guide is 0

wherever you set the top margin or inset or padding of the main view (the black above), it's getting called twice in those instances, adding the extra padding. Is your view laid out programmatically or in a storyboard? What constraints have you set? — Tim, Nov 18 '15 at 02:03
What? I didn't set anything for the main view. I edited my post to show the view hierarchy This was made on a storyboard. — Wesley Cho, Nov 18 '15 at 04:58
So you have absolutely no code in the ViewController that modifies the constraints or frame? — Tim, Nov 19 '15 at 00:07
"frame" and "constraint" aren't in the VC class for this view. — Wesley Cho, Nov 19 '15 at 01:00
OK, so it's definitely a storyboard problem. I bet it's related to the video ratio constraint. In other words, perhaps the video isn't filling the view, leaving a grey bar above where it is playing? — Tim, Nov 19 '15 at 01:12

score 2 · Accepted Answer · answered Nov 19 '15 at 20:51

I don't fully understand the issue here but it seems to have been a view hierarchy issue?

This was the flawed hierarchy; I changed the color of the stackView to see if it was the culprit but it was not.

I did some more testing and found out that the issue was contained within the YTPlayerView.

The YTPlayerView started out including the grey space but after going to Youtube.com in Safari the using the iOS 9 "Back to App" function the grey bar shoved the view down into itself.

What finally fixed this issue is merely setting the YTPlayerView lower in the hierarchy like so:

The grey bar does not appear after using the "Back to App" function anymore.

Harikrishnan · Answer 2 · 2015-11-18T06:14:49.703

0

I once had a similar issue. It is not related to using segues. the issue is most probably with the constraints you are using. Set the top constraint of the YTPlayerView with respect to the top layout guide instead of top of superview(which you may have currently done). I cannot specifically say a solution for this problem unless I know the constraints you have provided. Providing constraints with respect to the top of the super view causes this kind of issue when you are "Presenting" a view controller and the "Dismissing" it, which is similar to the action you are doing with IOS 9 back to the app option. Just try with the constraint as I mentioned and if it doesn't solve the problem, try to give some details about the constraints you are using.

EDIT

To be more specific, right now you must be setting the top constraint of the YTPlayerView as a fixed distance (which is equal to the height of the navigation bar plus status bar, 64px I assume) to the top of the superview, which is the view of the ViewController. This need to be changed and the top constraint need to be set as 0px to the top layout guide. That should solve your problem.

EDIT 2

Since you are still having problem with it, try connecting the IBOutlet of the top constraint to the ViewController and then in the view controller's viewDidAppear method set it to zero.

Objective C:

topConstraint.constant = 0;
[self.view layoutSubviews];

Swift:

topConstraint.constant = 0
self.view.layoutSubviews()

Just to confirm, the superview of the YTPlayerView is grey in colour right?

edited Nov 18 '15 at 06:14

answered Nov 18 '15 at 05:14

Harikrishnan

7,765
13
62
113

I updated the question with the constraints. Unfortunately my `YTPlayerView` already has a constraint to the top layout guide. – Wesley Cho Nov 18 '15 at 05:59
What is the top space given to top layout guide? Is it zero? – Harikrishnan Nov 18 '15 at 06:03
@WesleyCho I have edited my answer, just try it and see if it works. – Harikrishnan Nov 18 '15 at 06:11
The top constraint is already 0 to top layout guide. I tried the code (I did connect the outlet too) that you gave but I still get the the grey bar. – Wesley Cho Nov 18 '15 at 06:48
The `View` that the `YTPlayerView` is in is white. I changed the background of the `YTPlayerView` to black to contrast it from the `View`. – Wesley Cho Nov 18 '15 at 06:50
Hmm.. That is really unclear what causes the issue, but I am 99% positive that the issue is with constraints and it is not a grey bar you are seeing but one of the views in the viewcontroller. I would suggest you to change the color of each view of your viewcontroller and figure out which view it is and then update the constraints accordingly. Constraint issues cannot be resolved by looking at a part of it. :( – Harikrishnan Nov 18 '15 at 06:57

score 0 · Answer 3 · answered Jun 22 '17 at 19:19

Another way in Swift 3:

func application(_ application: UIApplication, didFinishLaunchingWithOptions 
launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

     // Navigation bar will be black throughout the app
     UINavigationBar.appearance().barStyle = .blackOpaque

    return true
}

score 0 · Answer 4 · answered Apr 12 '19 at 08:48

The cause of this is that the UIWebBrowserView does not fill the entire UIWebViewScrollView of YTPlayerView

If you try to open the view debugger you will see the following :

From the view debugger we can see that the UIWebBrowserView is not filling the entire UIScrollView since the behavior for determining the adjusted content offsets is set to automatic by default, the documentation says :

var contentInsetAdjustmentBehavior: UIScrollView.ContentInsetAdjustmentBehavior { get set }

This property specifies how the safe area insets are used to modify the content > area of the scroll view. The default value of this property is > UIScrollView.ContentInsetAdjustmentBehavior.automatic.

To overcome this behaviour just set the ContentInsetAdjustmentBehavior to .never which will tell the UIScrollView of the player webView to Do not adjust the scroll view insets.

    if #available(iOS 11.0, *) {
       *yourPlayerView*.webView?.scrollView.contentInsetAdjustmentBehavior = .never
    } else {
        // Fallback on earlier versions
    }

score -1 · Answer 5 · answered Nov 19 '15 at 01:30

-1

Your video view is tagged with constraints to the size of your screen AND to the 16:9 ratio you want for the video feed. I can confirm that this creates the grey bar above the video feed. You can try without the aspect ratio (in which case the screen size will set itself).

answered Nov 19 '15 at 01:30

Tim

2,089
1
12
21

Unfortunately even when I set the height to a constant (required unless using bottom y constraint), the grey bar appears. One key thing I notice is that when the grey bar appears, it squishes the video view into a smaller height but same width. – Wesley Cho Nov 19 '15 at 01:42
Did you try deleting the aspect ratio like I suggested? – Tim Nov 19 '15 at 01:53
Yes, instead of the aspect ratio I set the height to a constant. – Wesley Cho Nov 19 '15 at 02:02
You said "unless using bottom y constraint", but isn't bottom Y pinned to Stack View? – Tim Nov 19 '15 at 02:07

Grey bar appearing under Navigation bar after segues Swift

5 Answers5

Linked