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

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

I also can confirm this

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

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

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?

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

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

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.

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

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

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

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

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