iOS Orientation Switch Breaks Menu/Page

[terryupton]

First let me say what a fantastic off canvas navigation, the best one I have seen. However, I seem to have found a possible bug but not sure what is causing this, if anyone can shed any light or a fix?

So if you view the site on landscape orientation on iOS and open/close the menu. When you change orientation to portrait, the page breaks and the menu/off canvas area suddenly appears and overlaps the page, but without any content or ability to remove this. The navigation was closed so not sure why this suddenly appears.

I have a screenshot of the after effect here: http://cl.ly/image/190m1x2E2w0h

I first spotted this on my one page after implementing the navigation, so immediate thought I had borked the code somehow, but I checked the original example and it is the same on there too... http://bit.ly/offcanvas4

Any ideas?

[torkiljohnsen]

@terryupton I tested http://bit.ly/offcanvas4 on both Safari and Chrome on iOS 7.1.2 on my iPhone 4, and was unable to reproduce this error. I tried both changing orientation with the menu open and the menu closed.

[terryupton]

@torkiljohnsen Interesting. I will do some further testing. I will try get my hands on some other devices. I am also on IOS 7.1.2 and also tested in both Safari and Chrome.

Here is the exact steps I took.

1. Open website in portrait mode
2. Then open the menu, and then close the menu
3. Change the phone orientation to landscape
4. Then open the menu, and then close the menu.
5. Change the phone orientation back to portrait
6. this should cause the issue explained above.

I have just check this again. Can you confirm these steps and if it occurs for you...?

[ghost]

I also can confirm this

[torkiljohnsen]

Yes, I can see the error now—in both browsers—and also with fewer steps:

1. Open the site in landscape mode
2. Open and close the menu
3. Switch to portrait mode

[terryupton]

Thanks for confirming @torkiljohnsen and @corvannoorloos - any ideas what causes this or how to potentially resolve it?

[torkiljohnsen]

The problem seems to be the #nav element overlapping the rest of the content.

I tested a z-index change with success in the Safari inspector: For the selector #nav:not(:target), set z-index: -1.

Could you test that out?

[torkiljohnsen]

@dbushell Are you maintaining this repo, or should we fork away somewhere? :)

[terryupton]

Thanks @torkiljohnsen - yes swapping this to z-index:-1; does the trick. Seems to all still function ok.

[torkiljohnsen]

I don't know why this happens, so the issue is still a bit of a mystery. The code change only places the nav at a lower z-index when it's not targeted.

If you don't have any other DOM elements with id="nav", which you shouldn't, you're fine.

[michaelwoodruff]

I have experienced this issue as well with iOS 8.1.1 on an iPhone 5s.

I’ll try and solve it by "swapping this to z-index:-1;”.

[terryupton]

This bug seems to be back in iOS 8.1.1 and 8.1.2 - anyone else seeing this or got a further resolution?

[torkiljohnsen]

I am not experiencing this bug on iOS 8.1.2, Safari. All is well here.

[torkiljohnsen]

I propose trying this solution instead: http://jsfiddle.net/Sbt75/49/

[nousheen]

I had the same problem ... had to fix it with javascript code

window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display = 'none';
    setTimeout(function () {
        document.body.style.display = originalBodyStyle;
    }, 10);
});

Ref: http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change