modal scrolls to top (I explain why)

  • Resolved JasonWoof

    (@jasonwoof)


    3 years, 6 months ago

    I see you’ve gotten a couple bug reports about the modal scrolling the page to the top. Here’s what’s causing it:

    .md-perspective, .md-perspective body {
    height: 100%;
    overflow: hidden;
}

    When applied to the html element like so:

    classie.add( document.documentElement, 'md-perspective' );

    The browser (chrome in my case) scrolls to the top because you’ve set the height of the content to the same as the height of window. So only the top of the page technically exists, so the scroll bar is hidden and the top of the content (the only part that exists) is shown.

    I’ve experimented in the past a bit with trying to get rid of the scrollbar on modals. In general I advise against doing this at all, since it tends to cause problems, but if you must mess with the scrollbar, then please save the scrollbar position when opening your modal, and put it back when you’re done. This is surprisingly easy to do in javascript.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter JasonWoof

    (@jasonwoof)

    I tried a simple workaround of adding this custom CSS to my theme:

    html.md-perspective {
	height: auto;
	overflow: auto;
}

    But then the modal was appearing half way down, ie “position: fixed” wasn’t behaving as expected, because of this:

    .md-perspective body {
    background: #222;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}

    The “perspective:” css property breaks “position: fixed” (of children).

    So I had to add this to my workaround:

    html.md-perspective body {
    -webkit-perspective: none;
    -moz-perspective: none;
    perspective: none;
}

    Now the modal appears in the center of the window, and nothing happens to the scrollbar.

    Plugin Author A WP Life

    (@awordpresslife)

    Hi @jasonwoof,

    Thanks for the CSS, we will test the plugin and add CSS to the next update.

    Thanks

    Thread Starter JasonWoof

    (@jasonwoof)

    Both the CSS snippets in my workarounds are to undo stuff in your CSS. You don’t need to add stuff, you need to remove things.

    Just stop meddling with the <html> and <body> tags.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘modal scrolls to top (I explain why)’ is closed to new replies.