lundi 22 juillet 2019

How can I prevent the Android keyboard from force-scrolling the view to the bottom of a modal window on text input focus?

I'm currently working on a website with member search features, and I have a modal window containing a contact form which, on specific user interaction, pops up over the rest of the content. The modal itself has a position: fixed property and is scrollable. However, when I select a text input and the keyboard slides up, the modal's content is scrolled to the bottom, placing the selected input outside the visible area and breaking UX flow pretty badly (since you have to scroll back up to be able to see what you're typing). Is there something I'm missing or some random property messing with scroll detection?

Oddly, this is a problem I've only encountered on mobile and tablet Android browsers (notably Chrome and Firefox), and not on iOS (both Chrome and Safari). I've also made sure to lock multi-platform and multi-browser page scrolling with this JavaScript library.

Consequently, I've tried a few things already, none of which have been successful. I tried to hard-code the height of the modal to the viewport height using JavaScript (it was originally set at 100vh), and while the scrolling stopped, I was left with an unreachable area at the bottom of the form (most likely equivalent to the height of the keyboard) containing half of a field and the submit button, which isn't really a fix in itself. I also tried to use absolute positioning with a top value forced to the current body scroll position, without success.

HTML:

<section class="modal__container row row--h-center wrapper">
    <div class="modal__content">
        <!-- Form content (title, subtitle, fields) -->
    </div>
</section>

The row and row--h-center add a flexbox display to the container with centered horizontal alignment.

CSS:

.modal__container {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000000000000;
    pointer-events: none;
    overflow-y: scroll;

    .modal__content {
        position: relative;
        width: 80vw;
        margin: auto 0;
    }
}

Aucun commentaire:

Enregistrer un commentaire