Fixes IE scrollbar issues (#16634)

Change-Id: Ic948fb801f3bca5101ba630c99bd321f3e4f24bb

3 files changed, 42 insertions, 12 deletions

diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss
index ad09207ce0..606dc6a7dd 100644
--- a/WebContent/VAADIN/themes/base/escalator/escalator.scss
+++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss
@@ -6,7 +6,7 @@
 
   .#{$primaryStyleName}-scroller {
     position: absolute;
-    z-index: 20;
+    z-index: 1;
     outline: none;
     @include box-sizing(border-box);
   }
@@ -31,6 +31,7 @@
     position: absolute;
     overflow: hidden;
     @include box-sizing(border-box);
+    z-index: 5;
   }
 
   .#{$primaryStyleName}-tablewrapper > table {
diff --git a/client/src/com/vaadin/client/widget/escalator/ScrollbarBundle.java b/client/src/com/vaadin/client/widget/escalator/ScrollbarBundle.java
index d7122329b7..ef8713b82f 100644
--- a/client/src/com/vaadin/client/widget/escalator/ScrollbarBundle.java
+++ b/client/src/com/vaadin/client/widget/escalator/ScrollbarBundle.java
@@ -226,13 +226,14 @@ public abstract class ScrollbarBundle implements DeferredWorker {
 
         @Override
         protected void internalSetScrollbarThickness(double px) {
-            root.getStyle().setWidth(px, Unit.PX);
+            root.getStyle().setPaddingRight(px, Unit.PX);
+            root.getStyle().setWidth(0, Unit.PX);
             scrollSizeElement.getStyle().setWidth(px, Unit.PX);
         }
 
         @Override
         protected String internalGetScrollbarThickness() {
-            return root.getStyle().getWidth();
+            return scrollSizeElement.getStyle().getWidth();
         }
 
         @Override
@@ -295,13 +296,14 @@ public abstract class ScrollbarBundle implements DeferredWorker {
 
         @Override
         protected void internalSetScrollbarThickness(double px) {
-            root.getStyle().setHeight(px, Unit.PX);
+            root.getStyle().setPaddingBottom(px, Unit.PX);
+            root.getStyle().setHeight(0, Unit.PX);
             scrollSizeElement.getStyle().setHeight(px, Unit.PX);
         }
 
         @Override
         protected String internalGetScrollbarThickness() {
-            return root.getStyle().getHeight();
+            return scrollSizeElement.getStyle().getHeight();
         }
 
         @Override
diff --git a/client/src/com/vaadin/client/widgets/Escalator.java b/client/src/com/vaadin/client/widgets/Escalator.java
index 450655c9d3..ca54b97ca5 100644
--- a/client/src/com/vaadin/client/widgets/Escalator.java
+++ b/client/src/com/vaadin/client/widgets/Escalator.java
@@ -4367,15 +4367,39 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
             }
         };
 
+        int scrollbarThickness = WidgetUtil.getNativeScrollbarSize();
+        if (BrowserInfo.get().isIE()) {
+            /*
+             * IE refuses to scroll properly if the DIV isn't at least one pixel
+             * larger than the scrollbar controls themselves. But, probably
+             * because of subpixel rendering, in Grid, one pixel isn't enough,
+             * so we'll add two instead.
+             */
+            if (BrowserInfo.get().isIE9()) {
+                scrollbarThickness += 2;
+            } else {
+                scrollbarThickness += 1;
+            }
+        }
+
         root.appendChild(verticalScrollbar.getElement());
         verticalScrollbar.addScrollHandler(scrollHandler);
-        verticalScrollbar.setScrollbarThickness(WidgetUtil
-                .getNativeScrollbarSize());
+        verticalScrollbar.setScrollbarThickness(scrollbarThickness);
+
+        if (BrowserInfo.get().isIE8()) {
+            /*
+             * IE8 will have to compensate for a misalignment where it pops the
+             * scrollbar outside of its box. See Bug 3 in
+             * http://edskes.net/ie/ie8overflowandexpandingboxbugs.htm
+             */
+            Style vScrollStyle = verticalScrollbar.getElement().getStyle();
+            vScrollStyle.setRight(
+                    verticalScrollbar.getScrollbarThickness() - 1, Unit.PX);
+        }
 
         root.appendChild(horizontalScrollbar.getElement());
         horizontalScrollbar.addScrollHandler(scrollHandler);
-        horizontalScrollbar.setScrollbarThickness(WidgetUtil
-                .getNativeScrollbarSize());
+        horizontalScrollbar.setScrollbarThickness(scrollbarThickness);
         horizontalScrollbar
                 .addVisibilityHandler(new ScrollbarBundle.VisibilityHandler() {
                     @Override
@@ -4401,18 +4425,21 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
         table.appendChild(footElem);
 
         Style hCornerStyle = headerDeco.getStyle();
-        hCornerStyle.setWidth(WidgetUtil.getNativeScrollbarSize(), Unit.PX);
+        hCornerStyle.setWidth(verticalScrollbar.getScrollbarThickness(),
+                Unit.PX);
         hCornerStyle.setDisplay(Display.NONE);
         root.appendChild(headerDeco);
 
         Style fCornerStyle = footerDeco.getStyle();
-        fCornerStyle.setWidth(WidgetUtil.getNativeScrollbarSize(), Unit.PX);
+        fCornerStyle.setWidth(verticalScrollbar.getScrollbarThickness(),
+                Unit.PX);
         fCornerStyle.setDisplay(Display.NONE);
         root.appendChild(footerDeco);
 
         Style hWrapperStyle = horizontalScrollbarDeco.getStyle();
         hWrapperStyle.setDisplay(Display.NONE);
-        hWrapperStyle.setHeight(WidgetUtil.getNativeScrollbarSize(), Unit.PX);
+        hWrapperStyle.setHeight(horizontalScrollbar.getScrollbarThickness(),
+                Unit.PX);
         root.appendChild(horizontalScrollbarDeco);
 
         setStylePrimaryName("v-escalator");