#1768·happy

Web: chat list scrolls in the wrong direction with the mouse wheel (inverted FlashList)

Author: f-livaCreated Sep 7, 2026Updated Sep 10, 2026

Summary

On the web client the chat list scrolls in the wrong direction with the mouse wheel: wheel down scrolls the conversation up, wheel up scrolls it down. Trackpad two-finger scroll is affected the same way.

Environment

  • Web build (React Native Web / Expo), desktop Chrome.
  • Native mobile is unaffected.

Root cause

ChatList renders a FlashList with the inverted prop. On web, inverted is implemented with transform: scaleY(-1) on the content wrapper and each cell — but not on the scroll node itself. The browser's native wheel handling therefore drives scrollTop along the visually-flipped axis, so every vertical wheel gesture moves the list the wrong way.

This is a known, unfixed FlashList issue, and inverted is deprecated in FlashList v2:

  • Shopify/flash-list#558
  • Shopify/flash-list#1351
  • Shopify/flash-list#1511

Likely the same web-inversion family as #1416 (keyboard nav inverted on web) and #793 (inverted list layout issues on web).

Steps to reproduce

  1. Open the web client, open any session with enough messages to scroll.
  2. Scroll the mouse wheel down.
  3. The conversation scrolls up (toward older messages) instead of down.

Expected

Wheel down moves toward the newest messages (bottom); wheel up moves toward older (top) — as in any chat.

Fix

PR #1767 extends ChatList's existing web wheel listener: for vertical-dominant wheels it preventDefault()s and drives node.scrollTop -= e.deltaY (the exact inverse of the wrong native default). Horizontal-dominant gestures (code blocks, tables) are left to the browser.

A fuller fix would migrate off the deprecated inverted prop to maintainVisibleContentPosition={{ startRenderingFromBottom: true }}, but that flips the whole coordinate system of the list and is a much larger change.