ViewportScroller getScrollPosition does not work in Internet Explorer

[pcroc]

🐞 bug report

Affected Package

The issue is caused by package @angular/common

Is this a regression?

No

Description

viewportScroller.getScrollPosition() returns [null,null] in Internet Explorer

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-b8ydqs

View in Internet Explorer 11

🔥 Exception or Error

Scroll position: [ null, null ]

🌍 Your Environment

Angular Version:

Angular CLI: 6.1.2
Node: 8.11.1
OS: linux x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.2
@angular-devkit/build-angular     0.7.2
@angular-devkit/build-optimizer   0.7.2
@angular-devkit/build-webpack     0.7.2
@angular-devkit/core              0.7.2
@angular-devkit/schematics        0.7.2
@angular/cli                      6.1.2
@ngtools/webpack                  6.1.2
@schematics/angular               0.7.2
@schematics/update                0.7.2
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.9.2

Anything else relevant?
Tried Internet Explorer 11

[skreborn]

This happens because BrowserViewportScroller.getScrollPosition returns with the values window.scrollX and window.scrollY, neither of which are supported by Internet Explorer.

This seems to be incorrectly feature-detected earlier in the function by BrowserViewportScroller.supportScrollRestoration, which returns true for IE11, as both window itself and window.scrollTo are defined. This, however, doesn't check for the availability of the scrollX and scrollY properties.

[enten]

Why not update ViewportScroller to get viewport scroll position like material2?

--

In-app fix: adding a polyfill in src/polyfills.ts for window.scrollX and window.scrollY can "fix" the issue (for the browser target) with the current ViewportScroller implementation.

Example for IE11:

// src/polyfills
if (!('scrollX' in window)) {
  Object.defineProperty(window, 'scrollX', { get: () => window.pageXOffset });
}

if (!('scrollY' in window)) {
  Object.defineProperty(window, 'scrollY', { get: () => window.pageYOffset });
}

[petebacondarwin]

It seems to me that it would be enough to use the this.window.pageXOffset and this.window.pageYOffset properties instead.

From https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX#Notes

The pageXOffset property is an alias for the scrollX property:

window.pageXOffset == window.scrollX; // always true
For cross-browser compatibility, use window.pageXOffset instead of window.scrollX.

These properties are supported by IE9-11: https://developer.mozilla.org/en-US/docs/Web/API/Window/pageXOffset#Browser_compatibility

[AndrewKushnir]

FYI, the corresponding PR #28262 that contains the fix was merged, so I'm closing this ticket. The fix should be available once the next release (11.0.3) is published. Thank you.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}