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:
parent
b75cec0107
commit
2b05d5844d
1 changed files with 8 additions and 12 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue