fix(block-scroll-strategy): collapsing root node when enabled (#4638)

* Prevents the `html` tag from collapsing when the `BlockScrollStrategy` is enabled.
* Fixes the scroll strategy not being disabled properly in tests.

Author: crisbeto

src/lib/core/overlay/_overlay.scss

@@ -70,8 +70,10 @@
   .cdk-global-scrollblock {
     position: fixed;
 
-    // Necessary for iOS not to expand past the viewport.
-    max-width: 100vw;
+    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
+    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
+    // that the element had before we made it `fixed`.
+    width: 100%;
 
     // Note: this will always add a scrollbar to whatever element it is on, which can
     // potentially result in double scrollbars. It shouldn't be an issue, because we won't

src/lib/core/overlay/scroll/block-scroll-strategy.spec.ts

@@ -23,6 +23,7 @@ describe('BlockScrollStrategy', () => {
   }));
 
   afterEach(() => {
+    strategy.disable();
     document.body.removeChild(forceScrollElement);
     setScrollPosition(0, 0);
   });
@@ -110,6 +111,16 @@ describe('BlockScrollStrategy', () => {
   }));
 
 
+  it('should keep the content width', () => {
+    forceScrollElement.style.width = '100px';
+
+    const previousContentWidth = document.documentElement.getBoundingClientRect().width;
+
+    strategy.enable();
+
+    expect(document.documentElement.getBoundingClientRect().width).toBe(previousContentWidth);
+  });
+
   /**
    * Skips the specified test, if it is being executed on iOS. This is necessary, because
    * programmatic scrolling inside the Karma iframe doesn't work on iOS, which renders these