Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

$mdUtil.disableScrollAround breaks the page when body has overflow-x:hidden.  #9860

@sebakerckhof

Description

@sebakerckhof

Actual Behavior:

  • What is the issue? *
    If a material component with disableParentScroll set to true (like mdDialog, mdSelect, ...) is opened, it calls $mdUtil.disableScrollAround. If the body has overflow-x:hidden; in its computed style, then $mdUtil.disableScrollAround will add overflow: hidden to the body (here: https://github.com/angular/material/blob/master/src/core/util/util.js#L298-L300). This breaks the page.
  • What is the expected behavior?
    Same as without overflow-x: hidden

CodePen (or steps to reproduce the issue):
http://codepen.io/sebakerckhof/pen/bwQdaV
Scroll down & either open the dialog by clicking the button, or open the select element.

Angular Versions:

  • Angular version: 1.5.9
  • Angular Material Version: 1.1.1

Additional Information:

  • Browser Type: Chrome, Firefox

Somehow adding position:fixed; width:100%; top: -Xpx makes the body.clientWidth smaller when the body has overflow-x:hidden; so that https://github.com/angular/material/blob/master/src/core/util/util.js#L298-L300 evaluates to true.
No idea why that is though.

Metadata

Metadata

Assignees

Labels

P1: urgentUrgent issues that should be addressed in the next minor or patch release.has: Pull RequestA PR has been created to address this issueresolution: fixedtype: bug

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions