search

HubSpot / vex

A modern dialog library which is highly configurable and easy to style. #hubspot-open-source
http://github.hubspot.com/vex/docs/welcome
MIT License
6.93k stars 495 forks source link

Vex Modal on iPhone (or similar mobile devices) Won't Scroll? #152

Open DavidsTreeDevelopment opened 8 years ago

DavidsTreeDevelopment commented 8 years ago

Has anyone else experienced this issue when opening a vex modal on a mobile device? The modal opens just fine, but when I try to scroll (on my iPhone) ,I end up scrolling the background instead of the modal. This media query CSS hack kind of solves the problem.

@media only screen and (max-width: 415px) {
    body.vex-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    .vex-content {
        position: absolute !important;
        z-index: 1000;
    }
}

But it's definitely not ideal because position:fixed causes the window to return to the top of the page when the modal is opened. I'd like to know whether or not I'm the only one experiencing this.

batter commented 8 years ago

With the latest version of Vex it scrolls the modal over the background for me, however, it doesn't seem to auto vertically center the modal automatically like it does for desktop browsers. This necessitates the user to scroll when it shouldn't be necessary since the entire modal could fit in the browser's view frame automatically.

ghost commented 7 years ago

@batter, were you able to find a solution to this issue? Also, was this issue on happening on iPhone?