Fix for scrolling bug triggered by overflowing elements at the bottom…

… of the doc (#3109)

css/amp.css

@@ -17,9 +17,16 @@
 /**
  * Horizontal scrolling interferes with embedded scenarios and predominantly
  * the result of the non-responsive design.
+ *
+ * Notice that it's critical that `overflow-x: hidden` is only set on `html`
+ * and not `body`. Otherwise, adding `overflow-x: hidden` forces `overflow-y`
+ * to be computed to `auto` on both the `body` and `html` elements so they both
+ * potentially get a scrolling box. See #3108 for more details.
  */
-html, body {
+html {
   overflow-x: hidden !important;
+}
+html, body {
   height: auto !important;
 }
 

examples/everything.amp.html

@@ -92,6 +92,18 @@
     #amp-iframe:target {
       border: 1px solid green;
     }
+
+    #breaker {
+      height: 100px;
+      background: green;
+    }
+
+    #breaking {
+      height: 200px;
+      width: 200vw;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
   </style>
   <script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>
   <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
@@ -362,6 +374,10 @@ <h2>SVG</h2>
     on-error-add-class="comic-amp-font-missing"
     on-load-add-class="comic-amp-font-loaded">
   </amp-font>
+
+  <div id="breaker">
+    <div id="breaking"></div>
+  </div>
 </article>
 </body>
 </html>

src/service/viewport-impl.js

@@ -807,6 +807,7 @@ export class ViewportBindingNaturalIosEmbed_ {
       webkitOverflowScrolling: 'touch',
     });
     setStyles(documentBody, {
+      overflowX: 'hidden',
       overflowY: 'auto',
       webkitOverflowScrolling: 'touch',
       position: 'absolute',

test/functional/test-viewport.js

@@ -711,6 +711,7 @@ describe('ViewportBindingNaturalIosEmbed', () => {
     const body = windowApi.document.body;
     expect(documentElement.style.overflowY).to.equal('auto');
     expect(documentElement.style.webkitOverflowScrolling).to.equal('touch');
+    expect(body.style.overflowX).to.equal('hidden');
     expect(body.style.overflowY).to.equal('auto');
     expect(body.style.webkitOverflowScrolling).to.equal('touch');
     expect(body.style.position).to.equal('absolute');