Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-08-16 07:13:12 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(widgets): directory board scroll stutter — seamless loop gap mismatch (#197)
Some checks are pending
CI / Unit tests (node --test) (push) Waiting to run
Details
CI / OpenAPI spec lint (push) Waiting to run
Details
CI / Android unit tests (Kotlin schedule evaluator vectors) (push) Waiting to run
Details
CI / Boot smoke + version check (push) Waiting to run
Details

Browse source 
The vertical auto-scroll is a CSS keyframe that translates the track by
cycleH = baseH + GAP_PX and loops linear infinite. GAP_PX was 100 but the actual
.gap element between the content and its seamless clone is 120px, so every cycle
the reset landed 20px off — a visible jump/stutter once per loop.

Set GAP_PX = 120 to match the .gap CSS, and drive each gap element's height from
GAP_PX inline so the scroll math and the rendered gap can never drift again.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
screentinker 2026-07-16 14:11:21 -05:00 committed by GitHub
parent 5f5ec88eb0
commit 059ee1744e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
server/routes/widgets.js
View file

@ -512,7 +512,8 @@ function renderDirectoryBoard(c) {
var SPEEDS = { slow: 20, medium: 45, fast: 75 }; var SPEEDS = { slow: 20, medium: 45, fast: 75 };
if (cfg.theme === 'light') document.body.classList.add('light'); if (cfg.theme === 'light') document.body.classList.add('light');
var GAP_PX = 100; var GAP_PX = 120; // MUST match the .gap element height (set inline below) — the scroll loop
// translates by baseH+GAP_PX, so any mismatch jumps that many px each cycle.
var MIN_SCROLL_PX_SEC = 5; // anti-burn-in minimum when content fits var MIN_SCROLL_PX_SEC = 5; // anti-burn-in minimum when content fits
// ----- header ----- // ----- header -----
@ -629,7 +630,8 @@ function renderDirectoryBoard(c) {
while (track.children.length > 1) track.removeChild(track.lastChild); while (track.children.length > 1) track.removeChild(track.lastChild);
var gap = document.createElement('div'); var gap = document.createElement('div');
gap.className = 'gap'; gap.className = 'gap';
track.appendChild(gap); gap.style.height = GAP_PX + 'px'; // MUST equal GAP_PX — the loop translates by baseH+GAP_PX;
track.appendChild(gap); // a mismatch (was CSS 120 vs GAP_PX 100) jumps 20px each cycle.
var baseH = baseBlock.getBoundingClientRect().height; var baseH = baseBlock.getBoundingClientRect().height;
var cycleH = baseH + GAP_PX; // distance to translate per loop var cycleH = baseH + GAP_PX; // distance to translate per loop
@ -643,6 +645,7 @@ function renderDirectoryBoard(c) {
if (i < cloneCount - 1) { if (i < cloneCount - 1) {
var g = document.createElement('div'); var g = document.createElement('div');
g.className = 'gap'; g.className = 'gap';
g.style.height = GAP_PX + 'px'; // keep every clone-gap == GAP_PX (seamless loop)
track.appendChild(g); track.appendChild(g);
} }
} }