md-select changes scroll position when closed

[EightArmCode]

Actual Behavior:

• What is the issue? * md-select changes scroll position on close in Firefox and IE
• What is the expected behavior? The window should return to its original position before the md-select is opened. In order to demonstrate this, you must put the md-select in the context of a page with scrollable content.

I have a work around that uses md-on-open and md-on-close to record the original scroll position and then return the page to that position after angular material finishes its animation, but the user can see the page scrolling up and down and it does not look professional.

function recordYOffset () {
    self.scrollYOffset = $window.pageYOffset
}

function returnToYOffset () {
    $window.scroll(0, self.scrollYOffset)
}

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: I hope JSFiddle will do: https://jsfiddle.net/b7c357of/2/
• Details: This issue proposes this solution:

     _:-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%;
        }
      }

Unfortunately, it only works for IE, and furthermore it causes another problem. When you use this, it causes the div.md-select-menu-container (and children) to scroll with the body instead of remaining fixed over the md-select, as can be seen at this variant of the jsfiddle.

AngularJS Versions: *

• AngularJS Version: I'm using 1.5.3, the jsfiddle example uses 1.3.8
• AngularJS Material Version: 1.1.3

Additional Information:

• Browser Type: * Firefox, Internet Explorer
• Browser Version: * Firefox 52.0.2 (64-bit), IE10, IE11
• OS: * Mac, Windows 7, Windows 10
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[pkarny]

Could you check if #10549 does fix your issue?
It's not merged yet so please remember to build material from source.

[EightArmCode]

I'm happy to try that. I just noticed you released a new version - is it in 1.1.4? I've updated and that doesn't seem to do the job.

Can you point me in the right direction for building from source? I see in the README that you just use dist/angular-material.js but I'm not sure how to use that. I'm using npm. Any tips you can offer would be much appreciated.

[pkarny]

@EightArmCode Unfortunately, I has not been merged yet, so it's only in my pull request right now.
To build from the source you need to:

1. download my fork of material repository: https://github.com/veritas/material/tree/veritas/fix-firefox-jump
2. git checkout veritas/fix-firefox-jump
3. Then follow the normal build from source steps: https://github.com/angular/material#-building so npm install && gulp build
4. After everything is done you should use the js file from dist/ as your angular-material library

PLEASE NOTE: I have forked that library just to make that fix, please don't use it in production code. But if this fixes your issue, I would like to ask you to leave a thumbs up in my pull request, so that it gets more attention from repository owners.

[EladBezalel]

@EightArmCode i'm trying to figure out what's wrong,
The select popup adjust itself so it would never change the scrolling of the page, what's the actual problem?

[EightArmCode]

Hi -

@EladBezalel

From my post: "md-select changes scroll position on close in Firefox and IE"
To reproduce this, go to my example in FF. Open the select, then close it. You will find that the position of the scroll is not where it was prior to opening the select.

More from the original post: "What is the expected behavior? The window should return to its original position before the md-select is opened. In order to demonstrate this, you must put the md-select in the context of a page with scrollable content."

The other issue I linked to provides a solution that only works in IE and not FF, and also doesn't work if your select has a scrollable parent.

What more clarity can I add here that might help?

@veritas I have not had a moment to test your solution yet, and I'm not sure I can tell you when I might get around to it. My hack/fix works well enough for the time being. That said, of course we all would love to see some sort of fix realized. Perhaps I'll try to find some time for it this weekend.

[imannorouzi]

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

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

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#container {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

[Splaktar]

The linked fiddle is working properly now (it depends on master) that the fix went into 1.1.5 and is still working in 1.1.7. Tested with Firefox 58.