iOS Orientation Switch Breaks Menu/Page about responsive-off-canvas-menu HOT 14 OPEN

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

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

I also can confirm this

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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?

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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.

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.

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

from responsive-off-canvas-menu.