fix(lightbox): prevent background flash on open
Some checks failed
CI / check (push) Failing after 5m16s
CI / build (push) Has been skipped

overlay inherited opacity:1 from .lightbox-overlay CSS, so the moment
it was appended to the DOM it painted a full-opacity black background.
this showed for ~24ms (the time until the image loaded and start() ran
the first frame that sets opacity 0), visible as a black flash before
the fade-in.

set overlay.style.opacity = '0' right after creating it, so it is
transparent when appended; start()'s transition then fades it to 1 as
intended.
This commit is contained in:
xfy 2026-06-23 17:37:38 +08:00
parent 8bdc3553bd
commit c1610ace99

View File

@ -161,6 +161,9 @@
overlay.setAttribute("aria-modal", "true");
overlay.setAttribute("aria-label", "图片预览");
overlay.setAttribute("tabindex", "-1");
// 创建后立即设 opacity 0append 到 DOM 时是透明的,避免在图片加载期间
// start() 执行前显示全黑背景造成闪烁。start() 的渐变会把 opacity 升到 1。
overlay.style.opacity = "0";
var img = document.createElement("img");
img.className = "lightbox-img";