Material: md-select causes page to jump when an option is clicked, only in IE

Created on 15 Sep 2015  路  6Comments  路  Source: angular/material

md-select causes page to jump when an option is clicked, only in IE. Works fine in chrome and FF. But trying in IE11, it does this.
Any workarounds?

IE
Source
picture danneniko

Most helpful comment

Here is my workaround for md-dialog

Here is a workaround. Just move the scroll from the body element to an inner element like below:

< body>
< div id="container">
< /div>
< body>

// Style
body{
height: 100%;
width: 100%;
overflow: hidden;
}
#container{
height: 100%;
width: 100%;
overflow-y: scroll;
}
picture imannorouzi on 27 Sep 2017
👍2

All 6 comments

Actually, the problem is not with md-select but with the backdrop/click-catcher that is applied to the page when components like selects or dialogs are opened. For some reason, IE doesn't like offsetting the <body> position and modifying its width.

I managed to hotfix this in my codebase like this (SCSS):

_:-ms-input-placeholder, :root {
  body[style] {
    position: inherit !important;
    top: inherit !important;
    width: inherit !important;
  }

  .md-click-catcher.md-wbTheme-theme {
    height: 100%;
    position: fixed;
    width: 100%;
  }
}

This prevents the page from jumping when a select is closed, but the whole thing is broken nonetheless, performance on IE is still _really_ bad, and this is a dirty fix.

wolfika picture wolfika on 7 Nov 2015

thanks @wolfika thats what i am looking for

GTarifshabbir picture GTarifshabbir on 11 Feb 2016

@wolfika Thanks for the solution. This solves the page jump issue when we open the md-select dropdown. But when we select any option from the dropdown that time page jumps. Is there any fix for the same?

Pravin-Parkhi picture Pravin-Parkhi on 7 Feb 2017

This fix actually caused a different problem for me. With this solution applied, the open menu does not remain positioned above its parent element, but instead scrolls with the page.

EightArmCode picture EightArmCode on 14 Apr 2017
👍1

Is there an equivalent workaround for md-dialog similar to the one above by @wolfika?

damanptyltd picture damanptyltd on 2 May 2017
👍1

Here is my workaround for md-dialog

Here is a workaround. Just move the scroll from the body element to an inner element like below:

< body>
< div id="container">
< /div>
< body>

// Style
body{
height: 100%;
width: 100%;
overflow: hidden;
}
#container{
height: 100%;
width: 100%;
overflow-y: scroll;
}
imannorouzi picture imannorouzi on 27 Sep 2017
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

epelc picture epelc  路  3Comments
reggiepangilinan picture reggiepangilinan  路  3Comments
rtprakash picture rtprakash  路  3Comments
ghost picture ghost  路  3Comments
pablorsk picture pablorsk  路  3Comments