Root cause found via puppeteer inspection: - trimBarWidth was 4px when renderTrim() ran - That made calc(32.64% - 12px) = ~-10px, putting handles offscreen left Modal element gets actual width AFTER appendChild + browser layout pass. Original code called renderTrim() synchronously right after appendChild, before the modal had real dimensions. Fix: 1. Use ResizeObserver on trim-bar to re-render whenever it gets actual width 2. Also use double requestAnimationFrame as fallback (waits for layout) Verified via puppeteer: Before: leftStyle='calc(32.6443% - 12px)' but trimBarWidth=4 After: handles correctly positioned within visible bar |
||
|---|---|---|
| .. | ||
| index.html | ||