Only force Safari reflow once (#186)

Author: tomivirkki

src/vaadin-dialog-resizable-mixin.html

@@ -152,7 +152,7 @@
 
         if (e.button === 0 || e.touches) {
           e.preventDefault();
-          this.__saveScrollPosition();
+
           this._originalBounds = this._getOverlayBounds();
           const event = this.__getMouseOrFirstTouchEvent(e);
           this._originalMouseCoords = {top: event.pageY, left: event.pageX};
@@ -209,7 +209,7 @@
               }
             }
           });
-          this.__forceSafariReflow();
+
           this.$.overlay.notifyResize();
         }
       }
@@ -224,44 +224,21 @@
         window.removeEventListener('mouseup', this._resizeListeners.stop[direction]);
         window.removeEventListener('touchend', this._resizeListeners.stop[direction]);
         this.dispatchEvent(new CustomEvent('resize', {detail: this._getResizeDimensions()}));
-        this.__restoreScrollPosition();
       }
 
       /**
        * @return {!DialogResizeDimensions}
        * @protected
        */
       _getResizeDimensions() {
+        const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
         const {width, height} = getComputedStyle(this.$.overlay.$.overlay);
         const content = this.$.overlay.$.content;
         content.setAttribute('style', 'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;');
         const {width: contentWidth, height: contentHeight} = getComputedStyle(content);
         content.removeAttribute('style');
+        this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
         return {width, height, contentWidth, contentHeight};
       }
-
-      /**
-       * Safari 13 renders overflowing elements incorrectly.
-       * This forces it to recalculate height.
-       * @private
-       */
-      __forceSafariReflow() {
-        const overlay = this.$.overlay.$.overlay;
-        overlay.style.display = 'block';
-        window.requestAnimationFrame(() => {
-          overlay.style.display = '';
-          this.__restoreScrollPosition();
-        });
-      }
-
-      /** @private */
-      __saveScrollPosition() {
-        this.__scrollTop = this.$.overlay.$.resizerContainer.scrollTop;
-      }
-
-      /** @private */
-      __restoreScrollPosition() {
-        this.$.overlay.$.resizerContainer.scrollTop = this.__scrollTop;
-      }
     };
 </script>

src/vaadin-dialog.html

@@ -392,6 +392,7 @@
           if (overlay.style.position !== 'absolute') {
             overlay.style.position = 'absolute';
             overlay.style.maxWidth = 'none';
+            this.__forceSafariReflow();
           }
 
           for (const arg in parsedBounds) {
@@ -442,6 +443,21 @@
         __getMouseOrFirstTouchEvent(e) {
           return e.touches ? e.touches[0] : e;
         }
+
+        /**
+         * Safari 13 renders overflowing elements incorrectly.
+         * This forces it to recalculate height.
+         * @private
+         */
+        __forceSafariReflow() {
+          const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop;
+          const overlay = this.$.overlay.$.overlay;
+          overlay.style.display = 'block';
+          window.requestAnimationFrame(() => {
+            overlay.style.display = '';
+            this.$.overlay.$.resizerContainer.scrollTop = scrollPosition;
+          });
+        }
       }
 
       customElements.define(DialogElement.is, DialogElement);

test/vaadin-dialog_draggable-resizable-test.html

@@ -545,14 +545,17 @@
           expect(dialog._setBounds).to.be.calledOnce;
         });
 
-        it('should not reset scroll position on dragstart', () => {
+        it('should not reset scroll position on dragstart', (done) => {
           dialog.modeless = true;
           button.style.marginBottom = '200px';
           dialog._setBounds({height: '100px'});
-          container.scrollTop = 100;
-          expect(container.scrollTop).to.equal(100);
-          drag(container);
-          expect(container.scrollTop).to.equal(100);
+          requestAnimationFrame(() => {
+            container.scrollTop = 100;
+            expect(container.scrollTop).to.equal(100);
+            drag(container);
+            expect(container.scrollTop).to.equal(100);
+            done();
+          });
         });
       });
 
@@ -783,12 +786,14 @@
             overlay.content.appendChild(div);
             window.ShadyDOM && window.ShadyDOM.flush();
             dialog._setBounds({height: 200});
-            overlay.$.content.style.padding = '20px';
-            container.scrollTop = 100;
-            resize(overlayPart.querySelector('.s'), 0, -50);
             window.requestAnimationFrame(() => {
-              expect(container.scrollTop).to.equal(100);
-              done();
+              overlay.$.content.style.padding = '20px';
+              container.scrollTop = 100;
+              resize(overlayPart.querySelector('.s'), 0, -50);
+              window.requestAnimationFrame(() => {
+                expect(container.scrollTop).to.equal(100);
+                done();
+              });
             });
           });
         }