T
TanStack•10mo ago
rival-black

Problems with jank in firefox

I'm having a problem with the transform offset doing small jumps occasionally after a scrollToIndex, specifically in firefox, and not chromium (haven't tested safari). The virtual items are dynamically sized. overflow-anchor: none didn't help. Below is the most relevant portion of the code. I was using top for positioning for other reasons, but I have the same problem whether using top or transform. 
function ArticleBody({ url, domain, content, readUpToIndex}) {
  const parentRef = useRef(null)

  const virtualizer = useWindowVirtualizer({
    count: content.length,
    estimateSize: () => 100,
    overscan: 5,
    scrollMargin: 100,
  })

  return <>
    <div ref={parentRef}>
    <div
      style={{
        height: `${virtualizer.getTotalSize()}px`,
        width: '100%',
        position: 'relative'
      }}
    >
      {virtualizer.getVirtualItems().map((virtualRow) => (
        <div
          key={virtualRow.index}
          data-index={virtualRow.index}
          ref={virtualizer.measureElement}
          style={{
            position: 'absolute', 
            // top: `${virtualRow.start - virtualizer.options.scrollMargin}px`,
            top: 0,
            transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
            left: 0,
            width: '100%'
          }}
        >
          <ArticleContent block={content[virtualRow.index]} />
        </div>
      ))}
    </div>
    </div>
  </>
}
function ArticleBody({ url, domain, content, readUpToIndex}) {
  const parentRef = useRef(null)

  const virtualizer = useWindowVirtualizer({
    count: content.length,
    estimateSize: () => 100,
    overscan: 5,
    scrollMargin: 100,
  })

  return <>
    <div ref={parentRef}>
    <div
      style={{
        height: `${virtualizer.getTotalSize()}px`,
        width: '100%',
        position: 'relative'
      }}
    >
      {virtualizer.getVirtualItems().map((virtualRow) => (
        <div
          key={virtualRow.index}
          data-index={virtualRow.index}
          ref={virtualizer.measureElement}
          style={{
            position: 'absolute', 
            // top: `${virtualRow.start - virtualizer.options.scrollMargin}px`,
            top: 0,
            transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
            left: 0,
            width: '100%'
          }}
        >
          <ArticleContent block={content[virtualRow.index]} />
        </div>
      ))}
    </div>
    </div>
  </>
}
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?