Incorrect tab bar height when user partially swipes up miniplayerview, let's go, and then changes orientation

[aguzmanballen]

I'm noticing that if a user were to slightly pull up the miniplayer, let go, and then change orientation from portrait to landscape mode, the tab bar is incorrect.

This becomes much more obvious when the user pull the minibar from the bottom, it reaches an open state, user changes orientation, and then user pulls the playerview down so it becomes a miniplayer again.

Changing orientation back and forth twice seems to bring everything back to normal but it would be nice for users to not have to do that for it to work.

I've been looking inside PBPopupInteractivePresentationController.swift to see if the source of this bug is here, but to no avail. Is there a place you can suggest I take a look? I don't want to just dump this issue on you; I can certainly help :)

[iDevelopper]

I'am not sure to understand, could you upload some video / screenshot? Is this happens in the example project or in your project?

[aguzmanballen]

Certainly! It’s more subtle when using your example, but it’s much more obvious when I use it on the app I am working on: https://drive.google.com/drive/folders/1QX07ickbD7U6ZihM8AV0PvVkuS0-qspP

You can see how the space between the icons and the tab bar are different depending on when the user lets go of the mini player and whether the device rotated only once when popupContentView state is open.

[iDevelopper]

It look like it is a custom tab bar and a custom popup bar, right? Can you send a sample project?

[aguzmanballen]

Oh wow! I can certainly send you a sample. I distilled my project so you have the bare bones project (cut 80% of the fat off my code :) ), all while being able to reproduce the issue: https://github.com/aguzmanballen/DebugPBPopupController. I tested this with 2.0.0 and the latest version in master and I still see the same thing.

To reproduce an obvious issue, run it, click the black button, drag the miniplayer up a bit but only so much so when you let go it goes back down (looks like this is only done in portrait mode). Then change the orientation (which would be landscape mode). You'll see that the tab bar becomes quite distorted. You can continue to see strange behavior when you start to drag the bar upward. There are certain thresholds where the bar instantaneously changes.

Other issue that is less obvious is when you pull the bar up so the popup changes from a .closed state to a .open state, if you change orientation and then slowly drag the view down, you'll see that the images in the tab bar are a bit different than they should be and it's only when you let go when it looks like it immediately changes to what it's supposed to be.

I hope this is helpful and like I said, I can certainly help you try and debug to get it to work! You've done such an amazing job with this project and I don't want to just leave it up to you to figure it out :)

[iDevelopper]

The issue is here only for device with safe area. And as the bug occurs only under iOS 12 (works perfectly on iOS 11 and iOS 13), I do not see where to look. This is necessarily in PBPopupInteractivePresentationController.swift or in PBPopupPresentationController.swift. And this only happens when the drag is canceled. Any idea? I know that Apple has always had a lot of problems with its UITabBarControllert (bugs)...

[iDevelopper]

Also, the result is not exactly the same if you use storyboard!

[aguzmanballen]

What very interesting findings; thanks for looking into it! This also seems to be appearing only on the iPhone X using 12.x it seems. Well, it looks like this isn't the issue I thought it was. Perhaps what I need to do is have my code check if it is an iPhone X and iOS 12.x and if so, to make sure orientation does not change while the PlayerViewController is displayed. I'd rather have users be mad at a forced UX than think my app is buggy :) Thank you!

[aguzmanballen]

Ah, I suppose that still doesn’t solve the issue when drag is cancelled. I’ll look into what’s going on there.

[aguzmanballen]

You're certainly right about the tab bar being buggy. It looks like the frame and insets of the bottomBar can get thrown out of whack. How exactly do I use my own custom bottomBar? I want to override the system's settings and use my own. I know I can do the following, but I can't figure out why the actual function is not being called:

extension TabBarViewController: PBPopupControllerDelegate, PBPopupControllerDataSource, PBPopupBarDataSource {

    func setupPBBar() {

        ...
        code not important for this example
        ...
        if let popupController = self.popupController {
            popupController.delegate = self
            popupController.dataSource = self   <-- should be enough?
        }
        ...
        More code not important for example
        ...
    }

// Function below is not being called. Also, it's hack code, I know. But it's just to analyze the behavior and then work backwards.
func bottomBarView(for popupController: PBPopupController) -> UIView? {
        let view = UIView()
        view.backgroundColor = UIColor.green
        let orientation = UIApplication.shared.statusBarOrientation
        if UIDevice.current.userInterfaceIdiom == .phone && (orientation == .landscapeLeft || orientation == .landscapeRight) {
            view.frame = CGRect(x: 0.0, y: 322.0, width: 812.0, height: 53.0)
        } else {
            view.frame = CGRect(x: 0.0, y: 729.0, width: 375.0, height: 83.0)
        }
        return view
    }
}

[aguzmanballen]

Sorry for all the edits! I saw there were two other functions in the DataSourceDelegate that returns the frame and the insets too. I think this will be good since I can still use the original bottomBar but override the insets and frame. Of course, I can’t get these functions called, which leads back to the question above: is setting popupController.dataSource = self enough? I would think so.

[iDevelopper]

Coming back from vacation... I was on a boat with no Internet all the time. I'am looking for the tab bar controller... But with no success from now.

If you want to use a custom one, there is an example in the repo (Custom container).

DemoContainerController.swift and DemoChildViewController.swift, the child controller that adopts the protocol dataSource and implements the delegate functions. This can be done also by the container...

[iDevelopper]

The tab bar layout is OK, the problem is that inside it, the items (images and labels) do not have the right size (height), that's why they are displayed higher...

[aguzmanballen]

Oh interesting. This means the problem is the way insets are being handled then, right? I think if I just add code somewhere that remembers what the insets are supposed to be, it should be good. What are your thoughts?

[iDevelopper]

Which insets? The position of the tab bar is correct, the items in it is do not have the right size. This seems to be an Apple bug.

[aguzmanballen]

Ah, don’t know why I never got an email with your response :(

Yes the tab bar position and frame is perfect. I thought the inset frame inside the tab bar is what is incorrect (due to an Apple bug). Aren’t the elements of the tab bar anchored to this inset frame so if we were to override the buggy frame with ours, it will then display correctly?

[iDevelopper]

Ah, don’t know why I never got an email with your response :(

You have to click on the Watch button

Yes the tab bar position and frame is perfect. I thought the inset frame inside the tab bar is what is incorrect (due to an Apple bug). Aren’t the elements of the tab bar anchored to this inset frame so if we were to override the buggy frame with ours, it will then display correctly?

We cannot change the frame of the UITabBarButton (private class), I have tried with no success.
I found the bug disappear if in the PBPopupPresentationController, I don't call presentingVC.beginAppearanceTransition and presentingVC.endAppearanceTransition. Then it is an Apple bug. I will update a new version soon. I also will drop iOS 9 and 10 support as these versions are very outdated.

I will update also the framework for catalyst in the same time.

[iDevelopper]

Close by 288dfeb