devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases 1 Wiki Activity

fix: remove 150px threshold from scroll observers

Browse Source 
The dist < 150 check caused the ResizeObserver and media load
listener to miss large layout shifts (e.g., GIF loading adding
400+ px of height). The isAtBottomRef gate already determines
whether to auto-scroll — the pixel threshold is redundant.
This commit is contained in:
Jannis Braun
2026-03-25 04:50:24 +01:00
parent 6817f65e56
commit f433093777
1 changed files with 4 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/MessageList.tsx
+2 -11
View File
@@ -170,14 +170,8 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
const observer = new ResizeObserver(() => { const observer = new ResizeObserver(() => {
const c = containerRef.current; const c = containerRef.current;
if (!c) return; if (!c || !isAtBottomRef.current) return;
// Use a tight threshold (150px) checked at fire time instead of the
// generous 5000px isNearBottomRef — prevents snapping the user back
// to bottom during momentum/inertial scrolling on mobile.
const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
if (isAtBottomRef.current && dist < 150) {
c.scrollTop = c.scrollHeight; c.scrollTop = c.scrollHeight;
}
}); });
observer.observe(content); observer.observe(content);
return () => observer.disconnect(); return () => observer.disconnect();
@@ -192,11 +186,8 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
const handleMediaLoad = () => { const handleMediaLoad = () => {
const c = containerRef.current; const c = containerRef.current;
if (!c) return; if (!c || !isAtBottomRef.current) return;
const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
if (isAtBottomRef.current && dist < 150) {
c.scrollTop = c.scrollHeight; c.scrollTop = c.scrollHeight;
}
}; };
content.addEventListener('load', handleMediaLoad, true); content.addEventListener('load', handleMediaLoad, true);