fix: explicit width on lyric-display + simplify scroll logic

position:absolute children with width:100% require explicit parent width.
max-width alone leaves the container at 0px, hiding all text via overflow:hidden.
Also removed jump-detection branch to avoid opacity:0 dead-ends.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ltadeu6 2026-06-08 17:16:30 -03:00
parent b75cec0107
commit 2b05d5844d
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D

View file

@ -243,7 +243,7 @@ html, body {
position: absolute;
left: 2%;
top: 4%;
max-width: 38%;
width: 38%; /* explicit width needed for abs-pos children */
height: 150px; /* 5 slots × 30px */
overflow: hidden;
pointer-events: none;
@ -252,6 +252,7 @@ html, body {
}
.lyric-ctx {
position: absolute;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
@ -1256,19 +1257,14 @@ function updateLyricContext(context) {
lyricDisplay.style.opacity = '1';
return;
}
const wasNextLine = ring[3]?.textContent === active.text;
currentActive = active.text;
if (lyricDisplay.style.opacity !== '1') {
initSlots(context);
lyricDisplay.style.opacity = '1';
} else if (wasNextLine) {
scrollUp(context);
} else {
// jumped position: crossfade to new context
lyricDisplay.style.opacity = '0';
setTimeout(() => { initSlots(context); lyricDisplay.style.opacity = '1'; }, 400);
scrollUp(context);
}
lyricDisplay.style.opacity = '1';
}
function fetchCurrent() {