fix: prevent incorrect overflow in Safari (#180)

vaadin · Jul 22, 2020 · f2c0ac5 · f2c0ac5
1 parent 5ec3e11
commit f2c0ac5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/vaadin-dialog-resizable-mixin.html b/src/vaadin-dialog-resizable-mixin.html
@@ -19,7 +19,7 @@
       }
 
       [part='overlay'][style] .resizer-container {
-        height: 100%;
+        min-height: 100%;
         width: 100%;
       }
 

diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html
@@ -79,6 +79,15 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="overflow">
+    <template>
+      <vaadin-dialog draggable opened modeless>
+        <template>
+        </template>
+      </vaadin-dialog>
+    </template>
+  </test-fixture>
+
   <script>
       function dispatchMouseEvent(target, type, coords = {x: 0, y: 0}, button = 0) {
         const e = new MouseEvent(type, {
@@ -728,5 +737,25 @@
           expect(modalDialog.opened).to.be.true;
         });
       });
+
+      describe('dialog with overflowing content', () => {
+        let dialog;
+
+        beforeEach(() => {
+          dialog = fixture('overflow');
+        });
+
+        it('should not overflow when style attribute is set on the overlay part', () => {
+          const container = document.createElement('div');
+          container.style.maxWidth = '300px';
+          container.style.overflow = 'auto';
+          container.textContent = Array(100).join('Lorem ipsum dolor sit amet');
+          const overlay = dialog.$.overlay;
+          overlay.content.appendChild(container);
+          // emulate removing "pointer-events: none"
+          overlay.$.overlay.setAttribute('style', '');
+          expect(overlay.$.overlay.offsetHeight).to.equal(overlay.$.resizerContainer.offsetHeight);
+        });
+      });
   </script>
 </body>