Material: md-dialog backdrop displays incorrectly if page is scrolled

[dozingcat]

See http://codepen.io/anon/pen/ZYVpWo . Scroll down and click the button; the dialog backdrop will not cover the entire frame, and sometimes showing the dialog causes the page to unexpectedly jump.

[dominikstrasser]

maybe this could help you....
md-backdrop{
position: fixed;
}

[wesalvaro]

The same is true for the bottom sheet.

I have a PR for the md-backdrop in #2023.

[david-gang]

I think this is also connected to #1830
It happens also with sidenavs and scrolled content.

[ivanhtp]

Hey guys! This ticket is really important.

Just to complement: position fixed to backdrop won't solve the problem completely.
You must also change the class .md-dialog-is-showing on body ( overflow: hidden) to overflow: visible.

[alexthewilde]

+1

[wesalvaro]

Quick fiddle to demonstrate this is still a very present bug:

http://output.jsbin.com/yotiloniri

Just make sure to shrink the screen vertically smaller than the content (the kitten picture).

[oli107]

+1

[pablorsk]

Solution

Search object causing the problem. For example a <md-sidenav /> tag with a parent like a <div>. On the code...

<div>
  <md-sidenav>
     <!-- this md-sidenav tag is causing a warning -->
  </md-sidenav>
</div>

Fixing the problem...

<div style="position:fixed;">
  <md-sidenav>
     <!-- No more warning! :) -->
  </md-sidenav>
</div>

4813

[stephengardner]

the top offset of the <md-backdrop> element is not being properly calculated...
adding:

md-backdrop {
    top: 0;
}

might help you, if this is the case.

[gglukmann]

I managed to fix it with setting background from hex to rgba value with rgba(243, 246, 251, .99)

[tavurth]

Had the same problem, the body was getting custom styles added, a hacky fix:

/**
 * If we don't do this, angular material will break when loading modal windows
 * Don't remove this unless you have a better alternative
 */
body {
    top: 0 !important;
}

[ImaginationHub]

To solve the incorrect position after the scrolling in iPad Safari, please try:
.md-dialog-container{
position:fixed;
top:0 !important;
overflow:hidden;
}

[Kmasterrr]

Hi guys,

Only came across this now. But this is how you fix this error on mobi or web:
On your CSS the above mentioned by @ImaginationHub didnt work for me. So i had to the following:

.md-dialog-container {
    position: fixed;
    top: 0 !important;
    overflow: hidden;
}

.md-dialog-is-showing {
    position: fixed;
    top: 0 !important;
    overflow: hidden;
}

Hope this helps :D