Body jumps when activating a modal in iOS

[kaskajp]

Every time you activate a modal, the page jumps down.

iOS 6.1.4

[drublic]

Thanks for reporting. This is related to #31 and I will try to find a working solution.

[anselmh]

This also applies for Android Chrome and Opera 14.

[anselmh]

As all related issues are closed, what's the status here?

[mkkwon]

Same here. Just posting to bump this thread and check the status of this. Apparently it also happens in the Chrome iOS app.

iOS 6.1.2

[mkkwon]

There is a workaround for this,.. Sorta. Make the anchor href link for "Close" button to href="#page" and then set the body's id to "page". The close button will serve as an anchor link to redirect users to the top of the page. This pattern is seen in lukew.com, with his navigation serving as bottom anchor links that also has a link redirecting to the top.

However it does not address the main issue of modal triggering page jump, so the issue should still remain open.

[jme783]

Does anyone have a way to prevent this mkkwon's solution works for closing the modal but what about opening it?

[jme783]

Has anyone discovered a workaround for this issue that they can share here? The page jump for iOS is creating other issues that are causing breakages in the style, especially on changing orientation from portrait to landscape.

Help would be greatly appreciated.

[anselmh]

Have you guys checked out branch wip-1.1.0 yet? This issue should be fixed already in the upcoming release. You can use this branch's code already although not all tasks for 1.1 have been finished.

[jme783]

Just tried the new modal.css and modal.js files for this branch. Still seeing this issue.

[anselmh]

@jme783 Thanks for reporting back. Then we need to investigate further here +@drublic.

[jme783]

No problem. Just let me know if/when there is a fix. I'll try to hack something in the intermediary

[anselmh]

It would be great if you could write down your working hack here then, so others can profit from it, too. :)

[jme783]

Here's what I did to prevent this from happening on my end. It's not ideal, but the page jump doesn't happen. I think the key is the fact that position:fixed is used for the modal.

If the user loads the page with the modal hash, remove it so the page doesn't jump.

var hash = window.location.hash;
if (hash == "#lf-widget-modal") {
  window.location.hash = "";
}

Also change the position of the semantic content div, modal inner, and modal close to absolute for mobile devices

@media screen and (max-width: 30em) {
    .semantic-content, .semantic-content .modal-inner, .semantic-content .modal-close {
    /* styles */
    position: absolute;
 }

This gets rid of the nice slide up animation of the modal for mobile, but it was a price I had to pay to prevent the page jump.