perf: use inline style for cell transform

vaadin · Mar 25, 2022 · 98f2d55 · 98f2d55
1 parent 1d43cb2
commit 98f2d55
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 23 deletions.
diff --git a/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js b/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js
@@ -692,6 +692,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onFocusIn(e) {
       if (!this._isMousedown) {
         this.toggleAttribute('navigating', true);
+        this.__updateHorizontalScrollPosition();
       }
 
       const rootTarget = e.composedPath()[0];

diff --git a/packages/grid/src/vaadin-grid-scroll-mixin.js b/packages/grid/src/vaadin-grid-scroll-mixin.js
@@ -247,24 +247,29 @@ export const ScrollMixin = (superClass) =>
       const clientWidth = this.$.table.clientWidth;
       const scrollLeft = this.__getNormalizedScrollLeft(this.$.table);
 
-      // Position cells frozen to end
-      const remaining = scrollLeft + clientWidth - scrollWidth;
+      // Only update the --_grid-horizontal-scroll-position custom property when navigating
+      // on row focus mode to avoid performance issues.
+      if (this.hasAttribute('navigating') && this.__rowFocusMode) {
+        this.$.table.style.setProperty('--_grid-horizontal-scroll-position', -scrollLeft + 'px');
+      }
 
-      this.$.table.style.setProperty('--_grid-horizontal-scroll-remaining', remaining + 'px');
-      this.$.table.style.setProperty('--_grid-horizontal-scroll-position', -this._scrollLeft + 'px');
+      const transform = `translate(${-scrollLeft}px, 0)`;
+      this.$.header.style.transform = transform;
+      this.$.footer.style.transform = transform;
+      this.$.items.style.transform = transform;
 
-      if (this.__isRTL) {
-        // Translating the sticky sections using a CSS variable works nicely on LTR.
-        // On RTL, it causes jumpy behavior (on Desktop Safari) so we need to translate manually.
-        const transformFrozen = `translate(${remaining}px, 0)`;
-        for (let i = 0; i < this._frozenCells.length; i++) {
-          this._frozenCells[i].style.transform = transformFrozen;
-        }
+      // Position frozen cells
+      const x = this.__isRTL ? scrollLeft + this.$.table.clientWidth - this.$.table.scrollWidth : scrollLeft;
+      const transformFrozen = `translate(${x}px, 0)`;
+      for (let i = 0; i < this._frozenCells.length; i++) {
+        this._frozenCells[i].style.transform = transformFrozen;
+      }
 
-        const transformFrozenToEnd = `translate(${scrollLeft}px, 0)`;
-        for (let i = 0; i < this._frozenToEndCells.length; i++) {
-          this._frozenToEndCells[i].style.transform = transformFrozenToEnd;
-        }
+      // Position cells frozen to end
+      const remaining = scrollLeft + clientWidth - scrollWidth;
+      const transformFrozenToEnd = `translate(${remaining}px, 0)`;
+      for (let i = 0; i < this._frozenToEndCells.length; i++) {
+        this._frozenToEndCells[i].style.transform = transformFrozenToEnd;
       }
     }
   };
diff --git a/packages/grid/src/vaadin-grid-styles.js b/packages/grid/src/vaadin-grid-styles.js
@@ -74,7 +74,6 @@ registerStyles(
 
     #header,
     #footer {
-      transform: translateX(var(--_grid-horizontal-scroll-position));
       display: block;
       position: -webkit-sticky;
       position: sticky;
@@ -102,7 +101,6 @@ registerStyles(
     }
 
     #items {
-      transform: translateX(var(--_grid-horizontal-scroll-position));
       flex-grow: 1;
       flex-shrink: 0;
       display: block;
@@ -166,13 +164,11 @@ registerStyles(
 
     [frozen] {
       z-index: 2;
-      transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
       will-change: transform;
     }
 
     [frozen-to-end] {
       z-index: 2;
-      transform: translateX(var(--_grid-horizontal-scroll-remaining));
       will-change: transform;
     }
 
@@ -293,10 +289,6 @@ registerStyles(
 
     /* RTL specific styles */
 
-    :host([dir='rtl']) *:is(#items, #header, #footer, [frozen], [frozen-to-end]) {
-      transform: none;
-    }
-
     :host([dir='rtl']) #items,
     :host([dir='rtl']) #header,
     :host([dir='rtl']) #footer {