iOS 11: Status bar of the transitioned view is white when using menuAnimationTransformScaleFactor

[frenkelor]

New Issue Checklist

I have read the guidelines for contributing and I understand:

• My issue is happening in the latest version of SideMenu.
• My issue was not solved in the README.
• My issue can not be answered on stackoverflow.com.
• My issue is not a request for new functionality that I am unwilling to build and contribute with a pull request.
• My issue is reproducible in the demo project.

Issue Description

Status bar of the transitioned view is white
see the image below
after clicking on the transitioned view the status bar place take over by the view

The issue is reproduced on Xcode 9 GM
iPhone 7,8,10 simulator

[jonkykong]

Thanks for reporting. I'm going to roll this into a pending update for Swift 4 with Xcode 9 once it's officially released.

[jonkykong]

@frenkelor best I can tell, this is a regression or change in functionality in iOS 11 that I cannot easily account for. Whenever a navigation bar is not aligned with the window's top, the height is automatically reduced because it's assumed it does not need to allow space for the status bar.

A work around is to snapshot the main view controller and overlay the snapshot. I have not added this to the library as it would break existing functionality promises (menuPresentingViewControllerUserInteractionEnabled as well as screen rotation ugliness).

Example work-around, placed inside of your UISideMenuNavigationController subclass:

    private weak var screenshot: UIView?

    open override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        if let screenshot = presentingViewController?.view.snapshotView(afterScreenUpdates: false) {
            presentingViewController?.view.addSubview(screenshot)
            self.screenshot = screenshot
        }
    }
    
    override open func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        screenshot?.removeFromSuperview()
    }

[frenkelor]

strange thing is after clicking on the transformed view the one in the right somthing happens the view geting refreshed and the white space disappears

[jonkykong]

I observed this as well. It appears to update the view based on where the animation will end, not where it begins. Additionally, starting but then cancelling the interactive drag leaves it in the correct state.

The fix I stated above is how a lot of other menu controls get away with this problem. If your app only supports portrait layout you should be in the clear, otherwise you'll have to account for rotation or disable rotation while the menu is displayed.

[calli23]

After desperate hours of trying to solve this issue I got an answer. Just check off translucent checkbox for navigationBar...that worked for me.

[jonkykong]

@calli23 thanks a ton for that update. I tested this out myself, and while it appears to solve the scrolling jump and white bar, the status bar area still disappears as the main view transforms instantly which isn't smooth.

Additionally, some developers might still be wanting to support translucency on the navigation bar, so I can only call this a partial work-around for now. You can also uncheck extending edges under the top bar for the same effect.

[dnosk]

Any update here?

[jonkykong]

@dnosk I have not been investigating beyond the initial finds. Have you found a solution?

[dnosk]

@jonkykong No solution found yet, "Just check off translucent checkbox for navigationBar...that worked for me" does not work for us :(

[jonkykong]

As I mentioned, you can also uncheck extending edges under the top bar for the same effect. Alternatively, you can use the code snippet to substitute a screenshot. You'll also need to prevent screen rotation while the menu is displayed.

[calli23]

There is another possibility:

1. Use sideMenuWillAppear and do the following

• Create a new custom UIView with 20px height, x- and y-position both at 0
• Tag it with a number of your choice
• Choose your preferred background color
• Add that view as a subview to your ContentviewController

2. Use sideMenuWillDissappear and do the following

• Iterate through your ContentViewControllers subviews
• If tag number matches your chosen UIView tag number then remove it from superview()

That should do the trick. Some special behavior in case of rotating the device has to be implemented in addition to that workaround.

[jonkykong]

@calli23 while that will work, it's probably safer (and less code) to use a snapshot to not have to deal with scrolling area changes.

[kiokumicu]

SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
Work for me

[jonkykong]

@kiokumicu what problem does that solve?

[kiokumicu]

@jonkykong

[jonkykong]

Your screenshot does not make use of menuAnimationTransformScaleFactor which is what this bug is about. Setting SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear has no effect on this from my test.

[salil09]

Thank you so much @kiokumicu I spent hours searching for this solution .

[EmilsenLind]

Hi guys, I seem to have effectively removed this annoying bug from my own custom implementation of a framework similar to this.

The issue is with UISafeAreaLayoutGuide, which gets removed when UIWindow detects it is no longer needed for a specific UIViewController, such as here where the view controller gets transformed into a smaller scale thus not in range of the safe area insets. The way I solved it in my own implementation is by adding custom safearea insets, effectively supplementing those that is originally given to us automatically. These area insets is inserted at the beginning of the animation:

private func addSafeInsets(forVC vc: UIViewController) {
if #available(iOS 11.0, *) {
print(vc.view.safeAreaLayoutGuide.layoutFrame)
vc.additionalSafeAreaInsets = UIEdgeInsets(top: vc.view.safeAreaLayoutGuide.layoutFrame.origin.y, left: 0.0, bottom: 0.0, right: 0.0)
} else {
// Fallback on earlier versions
}
}

And should be removed as soon as the dismissal animation is started:

private func removeSafeInsets(forVC vc: UIViewController) {
if #available(iOS 11.0, *) {
print(vc.view.safeAreaLayoutGuide.layoutFrame)
vc.additionalSafeAreaInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
} else {
// Fallback on earlier versions
}
}

Now I hope these small snippets can help the code creator of this framework, thus it might not if it is build in an entirely different way than mine. Although im just so happy to have finally solved this issue for myself.

[jonkykong]

@EmilsenLind thank you for reporting this. My initial tests do seem to show this can resolve the issue, though more testing needs to be done and I'm concerned that the solution will cause other bugs.

[jonkykong]

Update:

I've spent a few hours trying to correct for this behavior and am getting very inconsistent results across the following permutations:

• Interactive (gesture based) vs. non-interactive display
  • Canceling interactive displays
• Transforms:
  • No transform (menuAnimationTransformScaleFactor == 1)
  • Shrinking transforms (menuAnimationTransformScaleFactor < 1)
  • Growing transforms (menuAnimationTransformScaleFactor > 1)
• Screen rotation after menu is displayed

I've tried transforming the view.layer instead of the views directly with a minor increase in success, but still no clean and consistent working solutions.

Rather than submit an incomplete solution and get new bug reports, I have committed my progress on branch #258-Fixes if someone else wants to try resolving it for all of the combinations above.

[hangocanh2303]

when i first open sidemenu, the result same image bellow

after first click, click sidemenu button again. It's ok

I setup sidemenu same above:
SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
why?
I'm using ipad, and ios 10.

[yanaMyn]

just implement UISideMenuNavigationControllerDelegate
`extension ViewController: UISideMenuNavigationControllerDelegate {

func sideMenuWillAppear(menu: UISideMenuNavigationController, animated: Bool) {
    print("SideMenu Appearing! (animated: \(animated))")
    SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
}

}`

[dungkv-1044]

anyone solved this?

[Semasancar]

SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
or
SideMenuManager.default.menuAnimationBackgroundColor = UIColor(patternImage: UIImage(named: "help")!)
not work !

@jonkykong

[kostapappas]

anyone solved this?
yes with yanaQhj comment

[FaizUlHassan123]

how top solve the mark issue

[ghost]

Yes @hassan143 i m getting same problem.

Is there any solution for this?

[iCtz]

hey guys have you tried to change the content insets....

in the size inspector you could set the "content insets = never"
and it will fix it
@pankaj-bhalala @hassan143 @kostapappas

[sagarsukode]

SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
Work for me

[jonjardine]

I can confirm that @sagarsukode's solution works perfectly when testing on an iPhone X.

[FaizUlHassan123]

thanks for replying me.

…

On Mon, Apr 15, 2019, 7:45 PM Jon Jardine ***@***.***> wrote: I can confirm that @sagarsukode <https://github.com/sagarsukode>'s solution works perfectly when testing on an iPhone X. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#258 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AkKI9mNMSHopwM0kPyQPC0TTXxbP4mPrks5vhJCIgaJpZM4PWnL-> .

[shehanmkg]

I want to remove the Status Bar from Side Menu. How should I do it guys?

[jonkykong]

Version 6.0.0 of SideMenu produces many fixes, but still no clear resolution for this problem. Using presentingViewControllerUseSnapshot = true can help preserve the experience for those of you wanting to use transforms.

[MHamayun]

how to make it globally please share all code for alldelagate

[mbappinte]

SideMenuPresentationStyle.menuSlideIn.backgroundColor = UIColor.clear now.

[uknowmeright]

let storyboard = UIStoryboard(name: "Main", bundle: nil)
if let theController = storyboard.instantiateViewController(withIdentifier: "UISideMenuNavigationController") as? UISideMenuNavigationController {

            SideMenuPresentationStyle.menuSlideIn.backgroundColor = UIColor.clear
            theController.presentationStyle = .menuSlideIn
            theController.presentationStyle.backgroundColor = UIColor.clear
            
            previousController.present(theController, animated: true, completion: nil)
}

This Code worked for me. Hope it helps someone.

[sukh1993]

SideMenuManager.default.menuFadeStatusBar = false

that shows:- 'menuFadeStatusBar' is deprecated: This property has been moved to the SideMenuNavigationController class.
Is there any other solution for that?

[mohammadsufyan]

Use this for Swift 5:
sideMenu.presentationStyle.backgroundColor = UIColor.clear

[sukh1993]

I am using Swift4:-

SideMenuPresentationStyle.backgroundColor = UIColor.clear
shows error :- Instance member 'backgroundColor' cannot be used on type 'SideMenuPresentationStyle'

when using this :- SideMenuPresentationStyle.menuSlideIn.backgroundColor = UIColor.clear
it doesn't work for me @mohammadsufyan
I need swift4 syntax

[Majituteniyazov]

@jonkykong

How to use these deprecated things in the latest version ? Can you help me? I was looking for solving that problem on issues and stackoverflow, but did not find solving, please please please

I'm using swift 5 and Xcode 11

[Majituteniyazov]

@jonkykong

How to use these deprecated things in the latest version ? Can you help me? I was looking for solving that problem on issues and stackoverflow, but did not find solving, please please please

I'm using swift 5 and Xcode 11

I've got solution:
All I had to do was that - to add another property "Settings" after "rootViewController"

[zohaibmanzoorkushwahaa]

var statusBarFrame: CGRect {
if #available(iOS 13.0, *) {
return containerView.window?.windowLevel.statusBarManager?.statusBarFrame ?? .zero
} else {
return UIApplication.shared.statusBarFrame
}
}

Issue: Value of type 'UIWindow.Level' has no member 'statusBarManager'
Please Help

[MHamayun]

This problem is occurs with me my problem is solved by this way:
I make a function according this sideMen like have its size or colour so when I call at viewdidload problem is solved but when I don't call so problem is still

[Khislatjon]

Hello guys! Where should I add this code:
SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
to prevent status bar being in a black color.

[sijjeel]

@jonkykong
Hi Guys, I am having the same issue, Please let me know if anyone found a solution for this.
Thanks

[JaisinghSisodia]

SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
or
SideMenuManager.default.menuAnimationBackgroundColor = UIColor(patternImage: UIImage(named: "help")!)
not work !

@jonkykong

did anyone got any solution for it

[Farazahmed90]

Hello, I am pushing view controller on didselect in sidemenu controller but it will push viewcontroller in the sidemenu not in the root controller
movie.zip

[Slaine066]

@frenkelor best I can tell, this is a regression or change in functionality in iOS 11 that I cannot easily account for. Whenever a navigation bar is not aligned with the window's top, the height is automatically reduced because it's assumed it does not need to allow space for the status bar.

A work around is to snapshot the main view controller and overlay the snapshot. I have not added this to the library as it would break existing functionality promises (menuPresentingViewControllerUserInteractionEnabled as well as screen rotation ugliness).

Example work-around, placed inside of your UISideMenuNavigationController subclass:

    private weak var screenshot: UIView?

    open override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        if let screenshot = presentingViewController?.view.snapshotView(afterScreenUpdates: false) {
            presentingViewController?.view.addSubview(screenshot)
            self.screenshot = screenshot
        }
    }
    
    override open func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        screenshot?.removeFromSuperview()
    }

@jonkykong Thank you for the snippet. If landscape mode is not needed it's a good workaround!