Skip to content

ViewportScroller getScrollPosition does not work in Internet Explorer聽#27957

Closed

Description

@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

Activity

  1. skreborn commented on Jan 7, 2019

    @skreborn
    Contributor

    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.

  2. added
    area: commonIssues related to APIs in the @angular/common package
    on Jan 7, 2019
  3. added this to the needsTriage milestone on Jan 7, 2019
  4. enten commented on Feb 28, 2019

    @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 });
    }
  5. modified the milestones: needsTriage, Backlog on Apr 25, 2019
  6. petebacondarwin commented on May 28, 2020

    @petebacondarwin
    Contributor

    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

  7. added
    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
    and removed
    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
    on Oct 1, 2020
  8. modified the milestones: Backlog, needsTriage on Oct 1, 2020
  9. added
    P4A relatively minor issue that is not relevant to core functions
    on Oct 1, 2020
  10. modified the milestones: needsTriage, Backlog on Oct 1, 2020
  11. AndrewKushnir commented on Nov 19, 2020

    @AndrewKushnir
    Contributor

    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.

  12. angular-automatic-lock-bot commented on Dec 20, 2020

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

  13. locked and limited conversation to collaborators on Dec 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions