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

danneniko · 2015-09-15T11:46:38Z

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?

wolfika · 2015-11-07T10:27:38Z

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.

GTarifshabbir · 2016-02-11T11:25:27Z

thanks @wolfika thats what i am looking for

Pravin-Parkhi · 2017-02-07T17:47:20Z

@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?

EightArmCode · 2017-04-14T13:30:45Z

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.

alecpirillo · 2017-05-02T01:32:42Z

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

imannorouzi · 2017-09-27T02:27:21Z

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;
}

rschmukler self-assigned this Sep 28, 2015

rschmukler added this to the 0.12.0 milestone Sep 28, 2015

rschmukler added browser: IE This issue is specific to Internet Explorer priority: medium labels Sep 28, 2015

Patrik-Lundqvist mentioned this issue Oct 26, 2015

$mddialog close() methods scrolls page to top on IE11 #5334

Closed

ThomasBurleson modified the milestones: 1.0-rc1, 1.0-rc2, 1.0-rc3 Oct 27, 2015

ThomasBurleson modified the milestones: 1.0-rc3, 1.0-rc4 Nov 7, 2015

Patrik-Lundqvist mentioned this issue Nov 11, 2015

fix(mdUtil): disableBodyScroll no longer scrolls page to top in IE #5676

Closed

ThomasBurleson modified the milestones: 1.0-rc4, 1.0-rc5 Nov 16, 2015

rschmukler closed this as completed in badc1ef Nov 20, 2015

EightArmCode mentioned this issue Apr 14, 2017

md-select changes scroll position when closed #10588

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

danneniko commented Sep 15, 2015

wolfika commented Nov 7, 2015

GTarifshabbir commented Feb 11, 2016

Pravin-Parkhi commented Feb 7, 2017

EightArmCode commented Apr 14, 2017

alecpirillo commented May 2, 2017

imannorouzi commented Sep 27, 2017 •

edited by Splaktar

Loading

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

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

Comments

danneniko commented Sep 15, 2015

wolfika commented Nov 7, 2015

GTarifshabbir commented Feb 11, 2016

Pravin-Parkhi commented Feb 7, 2017

EightArmCode commented Apr 14, 2017

alecpirillo commented May 2, 2017

imannorouzi commented Sep 27, 2017 • edited by Splaktar Loading

imannorouzi commented Sep 27, 2017 •

edited by Splaktar

Loading