Fix trim bar handles invisible: ResizeObserver + rAF
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
This commit is contained in:
parent
47d313f39c
commit
4f7d8df659
@ -1218,14 +1218,27 @@
|
|||||||
if (which === "start") video.play();
|
if (which === "start") video.play();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Initial render
|
// Initial render — počakaj da DOM ima dimenzije (modal je bil pravkar dodan)
|
||||||
console.log("[EditModal] init", { startInit, endInit, videoDuration, trimStart, trimEnd });
|
console.log("[EditModal] init", { startInit, endInit, videoDuration, trimStart, trimEnd });
|
||||||
renderTrim();
|
|
||||||
renderPlayhead();
|
// ResizeObserver: ko se trim-bar dobi pravilno širino, re-render
|
||||||
console.log("[EditModal] after renderTrim", {
|
const ro = new ResizeObserver(() => {
|
||||||
leftStyle: handleL.style.left,
|
renderTrim();
|
||||||
rightStyle: handleR.style.left,
|
renderPlayhead();
|
||||||
trimBarWidth: trimBar.getBoundingClientRect().width
|
});
|
||||||
|
ro.observe(trimBar);
|
||||||
|
|
||||||
|
// Tudi takoj renderiraj (za primer, da se ResizeObserver ne sproži)
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
renderTrim();
|
||||||
|
renderPlayhead();
|
||||||
|
console.log("[EditModal] after renderTrim", {
|
||||||
|
leftStyle: handleL.style.left,
|
||||||
|
rightStyle: handleR.style.left,
|
||||||
|
trimBarWidth: trimBar.getBoundingClientRect().width
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Save button
|
// Save button
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user