angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.23k stars 6.7k forks source link

block-scroll-strategy: some styles will cause not working as expected #15051

Open hsuanxyz opened 5 years ago

hsuanxyz commented 5 years ago

What is the expected behavior?

documentElement fixed the position and block scrolling.

What is the current behavior?

documentElement the position offset.

What are the steps to reproduce?

cdk-scroll

html, body {
  width: 100%;
  height: 100%;
}

body { 
  overflow-x: hidden;
}

StackBlitz: https://stackblitz.com/edit/angular-cgmaeh

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cdk 7.3

Is there anything else we should know?

https://github.com/angular/material2/blob/e039d6388fd18726c18ba1252b2118b8dfe87dfb/src/cdk/overlay/_overlay.scss#L128~L140

  .cdk-global-scrollblock {
  ...
+  body {
+    overflow-x: unset;
+  }
  }
wzhudev commented 5 years ago

overflow-x: visible may be better.

devversion commented 4 years ago

Seems like this is still an issue. Here is an updated reproduction: https://stackblitz.com/edit/angular-cgmaeh?file=app%2Fdialog-overview-example.html

It looks like the app misses margin: 0 for body and html. The scrolling appears due to the body element being shifted down. It seems to be shifted down due to the first <p> element margin.