From c1610ace9902e62812d77ee9befdd88b6ae9b57f Mon Sep 17 00:00:00 2001 From: xfy Date: Tue, 23 Jun 2026 17:37:38 +0800 Subject: [PATCH] fix(lightbox): prevent background flash on open 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. --- public/js/lightbox.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/js/lightbox.js b/public/js/lightbox.js index 0dfaf3b..d63f6b7 100644 --- a/public/js/lightbox.js +++ b/public/js/lightbox.js @@ -161,6 +161,9 @@ overlay.setAttribute("aria-modal", "true"); overlay.setAttribute("aria-label", "图片预览"); overlay.setAttribute("tabindex", "-1"); + // 创建后立即设 opacity 0：append 到 DOM 时是透明的，避免在图片加载期间 + // （start() 执行前）显示全黑背景造成闪烁。start() 的渐变会把 opacity 升到 1。 + overlay.style.opacity = "0"; var img = document.createElement("img"); img.className = "lightbox-img";