Retry runs get a fresh scroller so the feed can never start blank
Retrying the missed items could leave the feed on a stale position: the
retry swaps the queue (8 slides -> 3) and resets the scroll on the OLD
element, while the browser was still finishing a smooth scroll or snap.
Depending on the engine that could strand the viewport past the new
content (blank feed with the header still showing the old counter), and
the results slide kept its inner scroll because it has no key.
- The scroller now carries key={runId}, so every run mounts a brand-new
element: scroll position 0, fresh snap state, no inherited inner
scrolls in any slide.
- The scroll listener re-attaches to the new element (deps [runId]).
New retry suite 12/12: plain retry (fresh element, slide 1, header
Retry 1/N, missed item answerable again), retry fired mid smooth-scroll,
double-tap retry, and retry -> answer -> results -> retry again — all
land on slide 0 with content visible. Regression 74/74, mobile 51/51,
i18n 27/27. Lint + build clean. SW freezmo-v19.
This commit is contained in:
parent
6fb11fa405
commit
0ee9e930f0
2 changed files with 9 additions and 3 deletions
|
|
@ -49,7 +49,8 @@ export function StudyFeed({ deck }: { deck: Deck }) {
|
||||||
|
|
||||||
const next = useCallback(() => goTo(index + 1), [goTo, index]);
|
const next = useCallback(() => goTo(index + 1), [goTo, index]);
|
||||||
|
|
||||||
// Track which slide is visible (works for wheel, touch and programmatic scroll).
|
// Track which slide is visible (works for wheel, touch and programmatic
|
||||||
|
// scroll). Re-attached whenever the scroller remounts on a new run (runId).
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const container = scrollRef.current;
|
const container = scrollRef.current;
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
@ -67,7 +68,7 @@ export function StudyFeed({ deck }: { deck: Deck }) {
|
||||||
container.removeEventListener("scroll", onScroll);
|
container.removeEventListener("scroll", onScroll);
|
||||||
cancelAnimationFrame(frame);
|
cancelAnimationFrame(frame);
|
||||||
};
|
};
|
||||||
}, []);
|
}, [runId]);
|
||||||
|
|
||||||
// Keyboard navigation.
|
// Keyboard navigation.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -262,7 +263,12 @@ export function StudyFeed({ deck }: { deck: Deck }) {
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* Feed ------------------------------------------------------ */}
|
{/* Feed ------------------------------------------------------ */}
|
||||||
|
{/* The scroller remounts on every run (key={runId}) so it always
|
||||||
|
starts on the first slide with fresh scroll/snap state: a shrinking
|
||||||
|
queue or an interrupted smooth scroll can never leave the feed on a
|
||||||
|
stale, half-scrolled or blank position. */}
|
||||||
<div
|
<div
|
||||||
|
key={runId}
|
||||||
ref={scrollRef}
|
ref={scrollRef}
|
||||||
data-testid="study-feed"
|
data-testid="study-feed"
|
||||||
className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
|
className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
*
|
*
|
||||||
* Bumping CACHE_VERSION is how a new deploy invalidates old assets.
|
* Bumping CACHE_VERSION is how a new deploy invalidates old assets.
|
||||||
*/
|
*/
|
||||||
const CACHE_VERSION = "freezmo-v18";
|
const CACHE_VERSION = "freezmo-v19";
|
||||||
const SHELL_CACHE = `${CACHE_VERSION}-shell`;
|
const SHELL_CACHE = `${CACHE_VERSION}-shell`;
|
||||||
const ASSET_CACHE = `${CACHE_VERSION}-assets`;
|
const ASSET_CACHE = `${CACHE_VERSION}-assets`;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue