try setting overflow-x: hidden instead

Author: devongovett

packages/@react-aria/virtualizer/src/ScrollView.tsx

@@ -159,18 +159,18 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
   if (scrollDirection === 'horizontal') {
     style.overflowX = 'auto';
     style.overflowY = 'hidden';
-  } else if (scrollDirection === 'vertical') {
+  } else if (scrollDirection === 'vertical' || contentSize.width === state.width) {
+    // Set overflow-x: hidden if content size is equal to the width of the scroll view.
+    // This prevents horizontal scrollbars from flickering during resizing due to resize observer
+    // firing slower than the frame rate, which may cause an infinite re-render loop.
     style.overflowY = 'auto';
     style.overflowX = 'hidden';
   } else {
     style.overflow = 'auto';
   }
 
   innerStyle = {
-    // Omit width on inner element if it is equal to the width of the outer element.
-    // Since this is a block element, the browser will automatically make it full width.
-    // This prevents horizontal scrollbars from flickering when not needed.
-    width: contentSize.width === state.width ? undefined : contentSize.width,
+    width: contentSize.width,
     height: contentSize.height,
     pointerEvents: isScrolling ? 'none' : 'auto',
     position: 'relative',

packages/@react-aria/virtualizer/src/VirtualizerItem.tsx

@@ -11,7 +11,7 @@
  */
 
 import {Direction} from '@react-types/shared';
-import {LayoutInfo, Size} from '@react-stately/virtualizer';
+import {LayoutInfo} from '@react-stately/virtualizer';
 import React, {CSSProperties, ReactNode, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
 import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
@@ -33,19 +33,14 @@ export function VirtualizerItem(props: VirtualizerItemProps) {
   });
 
   return (
-    <div role="presentation" ref={ref} className={className} style={layoutInfoToStyle(layoutInfo, direction, parent, virtualizer.contentSize)}>
+    <div role="presentation" ref={ref} className={className} style={layoutInfoToStyle(layoutInfo, direction, parent)}>
       {children}
     </div>
   );
 }
 
 let cache = new WeakMap();
-export function layoutInfoToStyle(
-  layoutInfo: LayoutInfo,
-  dir: Direction,
-  parent?: LayoutInfo | null,
-  contentSize?: Size
-): CSSProperties {
+export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent?: LayoutInfo | null): CSSProperties {
   let xProperty = dir === 'rtl' ? 'right' : 'left';
   let cached = cache.get(layoutInfo);
   if (cached && cached[xProperty] != null) {
@@ -61,13 +56,6 @@ export function layoutInfoToStyle(
     }
   }
 
-  // Determine if the layoutInfo is the full width of its parent.
-  // In this case, we use 100% as the width rather than a pixel value,
-  // which avoids issues with flickering scrollbars.
-  let isFullWidth = parent
-    ? layoutInfo.rect.x === parent.rect.x && layoutInfo.rect.width === parent.rect.width
-    : contentSize && layoutInfo.rect.x === 0 && layoutInfo.rect.width === contentSize.width;
-
   let style: CSSProperties = {
     position: layoutInfo.isSticky ? 'sticky' : 'absolute',
     // Sticky elements are positioned in normal document flow. Display inline-block so that they don't push other sticky columns onto the following rows.
@@ -79,7 +67,7 @@ export function layoutInfoToStyle(
     WebkitTransition: 'all',
     WebkitTransitionDuration: 'inherit',
     transitionDuration: 'inherit',
-    width: isFullWidth ? '100%' : layoutInfo.rect.width,
+    width: layoutInfo.rect.width,
     height: layoutInfo.rect.height,
     opacity: layoutInfo.opacity,
     zIndex: layoutInfo.zIndex,

packages/@react-aria/virtualizer/src/useVirtualizerItem.ts

@@ -16,7 +16,6 @@ import {RefObject, useCallback} from 'react';
 import {useLayoutEffect} from '@react-aria/utils';
 
 interface IVirtualizer {
-  contentSize: Size,
   updateItemSize(key: Key, size: Size): void
 }
 

packages/@react-spectrum/table/src/TableViewBase.tsx

@@ -286,7 +286,7 @@ function TableViewBase<T extends object>(props: TableBaseProps<T>, ref: DOMRef<H
   // This overrides collection view's renderWrapper to support DOM hierarchy.
   type View = ReusableView<GridNode<T>, ReactNode>;
   let renderWrapper = (parent: View, reusableView: View, children: View[], renderChildren: (views: View[]) => ReactElement[]) => {
-    let style = layoutInfoToStyle(reusableView.layoutInfo, direction, parent?.layoutInfo, reusableView.virtualizer.visibleRect);
+    let style = layoutInfoToStyle(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
     if (style.overflow === 'hidden') {
       style.overflow = 'visible'; // needed to support position: sticky
     }
@@ -620,11 +620,10 @@ function TableVirtualizer(props) {
 
   let resizerPosition = layout.getResizerPosition() - 2;
 
-  let visibleRect = state.virtualizer.visibleRect;
-  let resizerAtEdge = resizerPosition > Math.max(state.virtualizer.contentSize.width, visibleRect.width) - 3;
+  let resizerAtEdge = resizerPosition > Math.max(state.virtualizer.contentSize.width, state.virtualizer.visibleRect.width) - 3;
   // this should be fine, every movement of the resizer causes a rerender
   // scrolling can cause it to lag for a moment, but it's always updated
-  let resizerInVisibleRegion = resizerPosition < visibleRect.maxX;
+  let resizerInVisibleRegion = resizerPosition < state.virtualizer.visibleRect.maxX;
   let shouldHardCornerResizeCorner = resizerAtEdge && resizerInVisibleRegion;
 
   // minimize re-render caused on Resizers by memoing this
@@ -656,14 +655,7 @@ function TableVirtualizer(props) {
               transition: state.isAnimating ? `none ${state.virtualizer.transitionDuration}ms` : undefined
             }}
             ref={headerRef}>
-            <div
-              role="presentation"
-              style={{
-                width: state.contentSize.width === visibleRect.width ? undefined : state.contentSize.width,
-                height: headerHeight
-              }}>
-              {state.visibleViews[0]}
-            </div>
+            {state.visibleViews[0]}
           </div>
           <ScrollView
             role="presentation"

packages/@react-types/sidenav/src/index.d.ts

@@ -28,7 +28,6 @@ export interface SpectrumSideNavItemProps<T> extends HTMLAttributes<HTMLElement>
 }
 
 interface IVirtualizer {
-  contentSize: Size,
   updateItemSize(key: Key, size: Size): void
 }