iOS 13 - UIPopoverPresentationController sourceview content visible in the arrow

Question

When I am displaying some view in UIPopoverPresentationController and presenting it as popover

popoverCon?.modalPresentationStyle = UIModalPresentationStyle.popover

the content have moved upward toward and a some part is being display in the arrow.

Further I had border around the popover

popoverCon?.view.layer.borderColor = .orange
popoverCon?.view.layer.borderWidth = 1.0;
popoverCon?.view.layer.cornerRadius = 10.0;
popoverCon?.view.layer.masksToBounds = false;

it is not showing toward the part where arrow is but it displays a little of the border line in the tip of the arrow.

This was working fine until iOS 12 but in iOS 13 this issue is coming.

Any suggestions on how I can solve this?

Answer 1

Searching on the internet I got help from following link

Twitter

so I had to add safe area and manage my views accordingly

CGFloat topPadding = 0.0;
    if (@available(iOS 11.0, *)) {
         topPadding = self.view.safeAreaLayoutGuide.layoutFrame.origin.y;
    }

Swift:

var topPadding: CGFloat = 0.0
    if #available(iOS 11.0, *) {
        topPadding = self.view.safeAreaLayoutGuide.layoutFrame.origin.y
    }

but I haven't got solution to the border problem of mine yet.

Edit: Temporarily I did solved the border problem by creating an invisible view on popover and giving it same frame as safe area and drawing its border.

Answer 2

Definitely a bug. When you have a situation where you use UIPopoverArrowDirectionAny you will see that the problem only exists when the arrow is at the top or left of the popover and not when the arrow appears at the right or the bottom of the popover. If you make adjustments in your code to compensate it will work if you use UIPopoverArrowDirectionUp or UIPopoverArrowDirectionLeft but will not display correctly using that adjustment when using UIPopoverArrowDirectionAny and the popup appears above or to the right of the target rectangle.

Answer 3

The top of my tableView content was cut off by the arrow. This is how I fixed it in my case (code inserted in my tableViewController Swift file):

override func viewSafeAreaInsetsDidChange() {
    if #available(iOS 11.0, *) {
        super.viewSafeAreaInsetsDidChange()
        self.tableView.contentInset = UIEdgeInsets(top: self.tableView.safeAreaInsets.top, left: 0, bottom: 0, right: 0)
    }
}

Answer 4

It is definitely a feature, they want you to use safe area since iOS 11, actually, but it seems now they want to force you to use it

Had the same problem as you, this worked for me https://useyourloaf.com/blog/safe-area-layout-guide/

Answer 5

I don't have an 'answer' yet, but I have identified what's going on and why it's so hard to fix.

ios13 UIPopoverViewController showing UITableViewController - Safe Area problems / Missing parts of table

Basically, any UITableView that has headers or footers is going to be broken in iOS 13 unless there's some way to alter the _UITableViewHeaderFooterViewBackground

That is notoriously problematic and doesn't play nicely with Auto-Layout - it's been known about for years, but Apple have never fixed it or made it easier to deal with and more publicly known.

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=video&cd=1&cad=rja&uact=8&ved=0ahUKEwibouuozfvkAhVCXRUIHVGsBegQtwIIKjAA&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DajsCY8SjJ1Y&usg=AOvVaw3_U_jy9EWH2dJrM8p-XhDQ

https://spin.atomicobject.com/2016/10/12/auto-layout-uitableview/

I'm unable to push my app to the App Store until I get this sorted.. I hope someone can identify how to manipulate this view so that it stops pushing the boundaries of the table out of whack with AutoLayout which causes this safe area intrusion.

Answer 6

My solution in Obj-C, for those who need an obj-c solution.

I had previously only popovercontroller, that was creating the error like shown in the question. I renamed it to childController for clarity and created a containing popoverController to make the solution given by @SaintMSent work in my situation of only one view originally. Also used https://stackoverflow.com/a/47076040/2148757 solution and https://useyourloaf.com/blog/self-sizing-child-views/ to resize appropriately since all of my childControllers set the preferred content size frequently.

//Create container popover controller and add child to it
UIViewController* popoverController = [[MyParentPopoverController alloc] init];
[popoverController.view addSubview:childController.view];
[popoverController addChildViewController:childController];
[popoverController setPreferredContentSize:childController.preferredContentSize];
//set popover settings on container
popoverController.modalPresentationStyle = UIModalPresentationPopover;
popoverController.popoverPresentationController.sourceRect = sourceRect;
popoverController.popoverPresentationController.sourceView = buttonView;
popoverController.popoverPresentationController.permittedArrowDirections = direction;
//Fix ios13 'bug' that Apple claims is a feature
UILayoutGuide* guide = popoverController.view.safeAreaLayoutGuide;
childController.view.translatesAutoresizingMaskIntoConstraints = NO;
[childController.view.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
[childController.view.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
[childController.view.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
[childController.view.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;
[popoverController.view layoutIfNeeded];
//Show the popover

...

@interface MyParentPopoverController : UIViewController

@end

@implementation MyParentPopoverController

-(void)preferredContentSizeDidChangeForChildContentContainer:(id <UIContentContainer>)container {
    [super preferredContentSizeDidChangeForChildContentContainer:container];
    [self setPreferredContentSize:container.preferredContentSize];
}

@end

Note: I didn't check for ios11 compatibility because my user base is restricted to not use it.

Answer 7

You should use constraints. And also pay attention to topAnchor. It must be safeAreaLayoutGuide.topAnchor. In my case, it works correctly. For example:

[NSLayoutConstraint activateConstraints:@[
        [toolbar.leftAnchor constraintEqualToAnchor:self.view.leftAnchor],
        [toolbar.rightAnchor constraintEqualToAnchor:self.view.rightAnchor],
        [toolbar.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor],
        [toolbar.heightAnchor constraintEqualToConstant:50]
    ]];

Answer 8

Setup your popover's content UIViewController like such:

NSLayoutConstraint.activate([
        myContentView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        myContentView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        myContentView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        myContentView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor)
    ])

Answer 9

Embed the contents of the popover in another view with "safe area relative margins" on. This should have -21,-21 as the origin. Turn off vertical and horizontal auto resizing. Seems to work, although you lose auto-stretching.