This commit is contained in:
2026-07-16 05:35:29 +02:00
parent 514d6597cf
commit 8374c464cd

View File

@@ -503,7 +503,7 @@
</div> </div>
<span class="comment-time timeago" tooltip="${fullDate}" style="font-size: 0.75em;"${tsAttr}>${timeStr}</span> <span class="comment-time timeago" tooltip="${fullDate}" style="font-size: 0.75em;"${tsAttr}>${timeStr}</span>
</div> </div>
<div class="comment-content"><div class="comment-content-inner">${displayContent}${attachmentsHtml}${pollHtml}</div><button class="read-more-btn">${window.f0ckI18n?.sidebar_read_more || 'read more'}</button></div> <div class="comment-content has-overflow"><div class="comment-content-inner">${displayContent}${attachmentsHtml}${pollHtml}</div><button class="read-more-btn" style="display:block">${window.f0ckI18n?.sidebar_read_more || 'read more'}</button></div>
${itemPreview} ${itemPreview}
</div> </div>
</div>`; </div>`;
@@ -544,10 +544,12 @@
} }
if (scrollHeight > clientHeight + 2) { // 2px buffer for rounding if (scrollHeight > clientHeight + 2) { // 2px buffer for rounding
// Content overflows — ensure clamped state (may already be set from HTML default)
btn.style.display = 'block'; btn.style.display = 'block';
btn.textContent = window.f0ckI18n?.sidebar_read_more || 'read more'; btn.textContent = window.f0ckI18n?.sidebar_read_more || 'read more';
container.classList.add('has-overflow'); container.classList.add('has-overflow');
} else { } else {
// Content fits — remove the default-on clamped state
btn.style.display = 'none'; btn.style.display = 'none';
container.classList.remove('has-overflow'); container.classList.remove('has-overflow');
} }
@@ -611,12 +613,11 @@
container.appendChild(ioSentinel); container.appendChild(ioSentinel);
} }
attachMediaLoadListeners(container); attachMediaLoadListeners(container);
// Defer overflow check until after the browser has performed layout on the // has-overflow is set by default in the HTML template so long comments are clamped
// newly-injected innerHTML — a synchronous call here fires before paint so // from the first paint. Reading scrollHeight inside checkOverflow forces a synchronous
// scrollHeight === clientHeight, causing has-overflow to be stripped and the // reflow, so this call immediately removes has-overflow from short comments before
// "read more" button to flash away. Double-rAF guarantees we measure after // anything is painted — no rAF deferral needed.
// the first layout/paint cycle. checkOverflow();
requestAnimationFrame(() => requestAnimationFrame(() => checkOverflow()));
fetchSidebarYoutubeTitles(container); fetchSidebarYoutubeTitles(container);
// Auto-play converted GIF videos and webm emoji stickers // Auto-play converted GIF videos and webm emoji stickers
container.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => { }), { once: true }); }); }); container.querySelectorAll('video.autoplay-gif').forEach(v => { v.autoplay = true; v.muted = true; v.play().catch(() => { v.addEventListener('canplay', () => v.play().catch(() => { }), { once: true }); }); });