Set the overlay container width and height to zero (#10860)

* Fix body scrolling in touch devices that do not honor overflow: hidden

Change-Id: Ia444d3c222094b9aa83ba31d5710eed9d9e549cc

2 files changed, 62 insertions, 1 deletions

diff --git a/WebContent/VAADIN/themes/base/common/common.scss b/WebContent/VAADIN/themes/base/common/common.scss
index fd4625606a..e7fdd3fe84 100644
--- a/WebContent/VAADIN/themes/base/common/common.scss
+++ b/WebContent/VAADIN/themes/base/common/common.scss
@@ -225,7 +225,12 @@ body &.v-app-loading {
 
 /* Enable kinetic scrolling on Mobile Safari 6 */ 
 .v-ios.v-sa6 & .v-scrollable { 
-        -webkit-overflow-scrolling: touch; 
+	-webkit-overflow-scrolling: touch; 
+}
+
+&.v-overlay-container {
+	width: 0;
+	height: 0;
 }
 
 }
\ No newline at end of file
diff --git a/uitest/src/com/vaadin/tests/overlays/OverlayTouchScrolling.java b/uitest/src/com/vaadin/tests/overlays/OverlayTouchScrolling.java
new file mode 100644
index 0000000000..fdcfdf7266
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/overlays/OverlayTouchScrolling.java
@@ -0,0 +1,56 @@
+/*
+@VaadinApache2LicenseForJavaFiles@
+ */
+
+package com.vaadin.tests.overlays;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Notification;
+
+public class OverlayTouchScrolling extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+
+        final CssLayout green = new CssLayout();
+        green.setSizeFull();
+        final CssLayout layout = new CssLayout() {
+            @Override
+            protected String getCss(Component c) {
+                return "background:green;";
+            }
+        };
+        layout.setSizeFull();
+        layout.addComponent(green);
+        setContent(layout);
+
+        Button button = new Button("Tap me with a touch device");
+        button.addClickListener(new Button.ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+
+                Notification
+                        .show("Now close this and you can scroll in mad places.");
+                green.addComponent(new Label(
+                        "Thank you for clicking, now scroll (with touch device) to area without green background, which shouldn't be possible."));
+            }
+        });
+        green.addComponent(button);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Using overlays breaks top level scrolling on touch devices";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 10860;
+    }
+}