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

Question

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

frenkelor opened this issue 7 years ago · 56 comments

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

Answer 1 · 2017-09-13T21:22:15.000Z

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

Answer 2 · 2017-09-21T05:41:54.000Z

@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()
    }

Answer 3 · 2017-09-21T11:57:39.000Z

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

Answer 4 · 2017-09-21T19:35:19.000Z

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.

Answer 5 · 2017-10-06T13:15:16.000Z

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

Answer 6 · 2017-10-06T17:58:17.000Z

@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.

Answer 7 · 2017-10-27T18:53:41.000Z

Any update here?

Answer 8 · 2017-10-27T20:53:11.000Z

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

Answer 9 · 2017-10-27T21:17:10.000Z

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

Answer 10 · 2017-10-27T21:52:04.000Z

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.

Answer 11 · 2017-10-29T12:39:23.000Z

There is another possibility:

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

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.

Answer 12 · 2017-10-30T02:29:51.000Z

@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.

Answer 13 · 2017-11-28T08:08:38.000Z

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

Answer 14 · 2017-11-28T08:37:48.000Z

@kiokumicu what problem does that solve?

Answer 15 · 2017-11-28T10:03:19.000Z

@jonkykong

Answer 16 · 2017-11-28T10:29:21.000Z

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.

Answer 17 · 2017-12-28T15:21:44.000Z

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

Answer 18 · 2018-03-10T13:44:13.000Z

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.

Answer 19 · 2018-03-12T20:25:34.000Z

@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.

Answer 20 · 2018-05-24T01:48:56.000Z

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.

Answer 21 · 2018-06-13T08:36:45.000Z

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.

Answer 22 · 2018-06-13T08:58:15.000Z

Does this happen in the example project? If not, then you are most likely doing something wrong.

…

On Wed, Jun 13, 2018 at 1:36 AM Hà Ngọc Anh ***@***.***> wrote: when i first open sidemenu, the result same image bellow [image: image] <https://user-images.githubusercontent.com/19758537/41339501-2996f31a-6f1f-11e8-90b5-3b9c6a39aad2.png> after first click, click sidemenu button again. It's ok [image: image] <https://user-images.githubusercontent.com/19758537/41339547-4db5214a-6f1f-11e8-9579-1b3ee1af0a72.png> I setup sidemenu same above: SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear why? I'm using ipad, and ios 10. — 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/AFdl_5j-FNMUmoil24vY2YIBLGT5DPQEks5t8M8igaJpZM4PWnL-> .

Answer 23 · 2018-06-15T08:36:00.000Z

@jonkykong
I create sidemenu in code, not in storyboard
This is my code setup
// side menu add
private func setupSideMenu() {
let menuLeftNavigationController = UISideMenuNavigationController(rootViewController: SideMenuVC())
SideMenuManager.default.menuLeftNavigationController = menuLeftNavigationController
SideMenuManager.default.menuFadeStatusBar = true
SideMenuManager.default.menuAnimationBackgroundColor = UIColor.clear
SideMenuManager.default.menuAddPanGestureToPresent(toView: self.navigationBar)
SideMenuManager.default.menuAddScreenEdgePanGesturesToPresent(toView: self.view)
SideMenuManager.default.menuShadowColor = .white
SideMenuManager.default.menuShadowRadius = 0
SideMenuManager.default.menuShadowOpacity = 255
// fix black status bar
//SideMenuManager.defaultManager.menuAnimationBackgroundColor = UIColor.rgb(red: 49, green: 48, blue: 49)
SideMenuManager.default.menuPresentMode = .menuSlideIn
SideMenuManager.defaultManager.menuPushStyle = .subMenu

And this is my code i call when menu button tapped:
@objc private func menuButtonTapped() {
print("show slide menu here")
present(SideMenuManager.defaultManager.menuLeftNavigationController!, animated: true, completion: nil)

Answer 24 · 2018-06-15T20:56:37.000Z

menuFadeStatusBar uses the menuAnimationBackgroundColor.

Answer 25 · 2018-06-16T03:23:24.000Z

It's not working

//SideMenuManager.default.menuAnimationBackgroundColor = true
SideMenuManager.default.menuAnimationBackgroundColor = UIColor.green

Answer 26 · 2018-06-16T05:51:50.000Z

Based on your example, it's working exactly as intended.

Answer 27 · 2018-06-18T01:46:49.000Z

**

**
I want it show similar above image, but it show similar bellow when first open side menu

Answer 28 · 2018-06-18T03:31:02.000Z

It works fine. Turn of fade menu status bar.

…

On Sun, Jun 17, 2018 at 9:46 PM Hà Ngọc Anh ***@***.***> wrote: ** [image: image] <https://user-images.githubusercontent.com/19758537/41514737-71f0b490-72d3-11e8-8773-41e96b184aaf.png> ** I want it show similar above image, but it show similar bellow when first open side menu [image: image] <https://user-images.githubusercontent.com/19758537/41514821-20d9bfc4-72d4-11e8-8d27-ed4cbf5002b4.png> — 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/AFdl_12itxWJtSrOJMKuu_KNF1RqyyPsks5t9waLgaJpZM4PWnL-> .

Answer 29 · 2018-06-18T06:20:06.000Z

ok, i solved this issue
reason is:
statusBarBackgroundView.backgroundColor = UIColor.rgb(red: 251, green: 64, blue: 0)
I set background color for status bar in AppDelegate.
Many thanks @jonkykong

Answer 30 · 2018-07-24T13:52:48.000Z

just implement UISideMenuNavigationControllerDelegate
`extension ViewController: UISideMenuNavigationControllerDelegate {

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

}`

Answer 31 · 2018-10-19T11:22:26.000Z

anyone solved this?

Answer 32 · 2018-11-16T21:58:33.000Z

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

@jonkykong

Answer 33 · 2018-12-06T22:35:56.000Z

anyone solved this?
yes with yanaQhj comment

Answer 34 · 2019-01-08T11:21:49.000Z

how top solve the mark issue

Answer 35 · 2019-01-23T11:58:57.000Z

Yes @hassan143 i m getting same problem.

Is there any solution for this?

Answer 36 · 2019-03-18T18:06:09.000Z

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

Answer 37 · 2019-03-24T06:10:36.000Z

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

Answer 38 · 2019-04-15T14:45:25.000Z

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

Answer 39 · 2019-04-15T14:47:56.000Z

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

Answer 40 · 2019-04-30T03:55:40.000Z

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

Answer 41 · 2019-07-14T20:25:25.000Z

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.

Answer 42 · 2019-07-19T07:39:05.000Z

how to make it globally please share all code for alldelagate

Answer 43 · 2019-08-09T11:19:30.000Z

SideMenuPresentationStyle.menuSlideIn.backgroundColor = UIColor.clear now.

Answer 44 · 2019-08-09T19:56:28.000Z

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.

Answer 45 · 2019-09-09T06:48:51.000Z

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?

Answer 46 · 2019-09-09T07:56:49.000Z

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

Answer 47 · 2019-09-09T08:07:46.000Z

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

Answer 48 · 2019-10-08T08:18:21.000Z

@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

Answer 49 · 2019-10-08T08:48:39.000Z

@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"

Answer 50 · 2019-12-02T13:48:10.000Z

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

Answer 51 · 2019-12-04T09:25:58.000Z

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

Answer 52 · 2020-05-06T12:30:01.000Z

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

Answer 53 · 2020-05-28T08:49:02.000Z

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

Answer 54 · 2020-06-01T08:00:30.000Z

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

@jonkykong

did anyone got any solution for it

Answer 55 · 2020-09-30T13:59:04.000Z

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

Answer 56 · 2020-10-23T08:59:15.000Z

@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!