fix: force reflow on resize in Safari

web-padawan · web-padawan · commit cec252a780b2 · 2020-07-22T20:28:56.000+03:00
diff --git a/bower.json b/bower.json
@@ -37,6 +37,7 @@
     "iron-component-page": "^3.0.0",
     "iron-test-helpers": "^2.0.0",
     "vaadin-button": "vaadin/vaadin-button#^2.4.0-alpha1",
+    "vaadin-text-field": "vaadin/vaadin-text-field#~2.7.0-alpha6",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
     "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0-alpha1"
diff --git a/src/vaadin-dialog.html b/src/vaadin-dialog.html
@@ -401,6 +401,12 @@
           }
 
           Object.assign(overlay.style, parsedBounds);
+
+          // Force reflow in Safari 13 to recalculate height
+          overlay.style.display = 'block';
+          window.requestAnimationFrame(() => {
+            overlay.style.display = '';
+          });
         }
 
         /** @private */
diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html
@@ -7,6 +7,7 @@
   <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
   <link rel="import" href="../src/vaadin-dialog.html">
+  <link rel="import" href="../../vaadin-text-field/vaadin-text-area.html">
 </head>
 
 <body>
@@ -756,6 +757,21 @@
           overlay.$.overlay.setAttribute('style', '');
           expect(overlay.$.overlay.offsetHeight).to.equal(overlay.$.resizerContainer.offsetHeight);
         });
+
+        it('should not overflow when using vaadin-textarea in the content', (done) => {
+          const textarea = document.createElement('vaadin-text-area');
+          textarea.value = Array(20).join('Lorem ipsum dolor sit amet');
+          const overlay = dialog.$.overlay;
+          overlay.content.appendChild(textarea);
+          overlay.$.content.style.padding = '20px';
+          // emulate resizing the dialog
+          dialog._setBounds({height: 50});
+
+          window.requestAnimationFrame(() => {
+            expect(getComputedStyle(overlay.$.overlay).height).to.equal(getComputedStyle(overlay.$.resizerContainer).height);
+            done();
+          });
+        });
       });
   </script>
 </body>

Original file line number	Diff line number	Diff line change
`@@ -401,6 +401,12 @@`
`401`	`401`	`}`
`402`	`402`
`403`	`403`	`Object.assign(overlay.style, parsedBounds);`
	`404`	`+`
	`405`	`+ // Force reflow in Safari 13 to recalculate height`
	`406`	`+ overlay.style.display = 'block';`
	`407`	`+ window.requestAnimationFrame(() => {`
	`408`	`+ overlay.style.display = '';`
	`409`	`+ });`
`404`	`410`	`}`
`405`	`411`
`406`	`412`	`/** @private */`