CSS过渡仅在Chrome开发者工具开启时生效的异常问题

问题重现 #

我碰到过类似的诡异问题！页面刚加载时，点击小图片触发弹窗的过渡效果完全失效；但只要打开Chrome开发者工具，在DOM树里定位到#popup > div > img并选中它，再点击主图片，过渡效果就正常工作了——哪怕关掉开发者工具也能保持正常。

测试环境是Chrome 66.0.3359.139，不管是在线编辑器还是本地独立HTML文件里，表现都一模一样。

我的需求很明确：点击小图片显示大图弹窗；弹窗显示时，点击任意位置关闭弹窗。弹窗的显示和关闭都需要平滑过渡——具体是先切换透明度，再让图片从屏幕上方滑入，通过给HTML元素添加/移除类来控制弹窗状态。

问题代码 #

下面是我最初的代码：

JavaScript

document.getElementById("clickme").onclick = function(ev) { 
  document.documentElement.classList.add("show-modal"); 
  ev.stopPropagation(); 
} 
document.documentElement.onclick = function() { 
  this.classList.remove("show-modal"); 
}

CSS

#clickme { 
  max-height: 300px; 
  cursor: pointer; 
  margin: 20px; 
  border: 1px solid #ddd; 
  border-radius: .25rem; 
  padding: 10px; 
} 
#popup { 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  left: 0; 
  top: 0px; 
  z-index: 2000; 
  padding-top: 30px; 
  display: none; 
} 
.show-modal #popup { 
  display: block; 
} 
#popup img { 
  display: block; 
  margin: auto; 
  position: relative; 
  top: -500px; 
  opacity: 0; 
  transition: top .5s 1s, opacity .25s; 
} 
.show-modal #popup img { 
  top: 0px; 
  opacity: 1; 
} 
#popup>div { 
  margin: auto; 
}

HTML

<p><img id=clickme src="http://devicatoutlet.com/img/birthday.png"></p> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p> 
<div id="popup"> 
  <div><img src="http://devicatoutlet.com/img/birthday.png"></div> 
</div>

问题根源 #

这其实是Chrome渲染引擎的一个小坑：当元素被包裹在display:none的容器里时，浏览器在页面初始加载时不会为这些子元素创建完整的渲染上下文，也不会计算它们的初始布局状态。当你添加show-modal类把容器改成display:block时，浏览器相当于“突然”创建了这些元素的布局，它会直接跳到最终状态，而不会触发过渡动画。

而当你打开开发者工具选中那个img元素时，浏览器会强制对该元素进行重绘和布局计算，相当于提前帮它建立了渲染上下文，之后再触发类切换时，就能正确识别状态变化，过渡自然就生效了。

修复方案 #

核心思路是不要用display:none来隐藏弹窗，改用visibility:hidden配合opacity:0，这样弹窗元素始终存在于DOM的渲染流中，浏览器会提前计算它的初始布局，类切换时就能正常触发过渡。

修改后的CSS如下：

#clickme { 
  max-height: 300px; 
  cursor: pointer; 
  margin: 20px; 
  border: 1px solid #ddd; 
  border-radius: .25rem; 
  padding: 10px; 
} 
#popup { 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  left: 0; 
  top: 0px; 
  z-index: 2000; 
  padding-top: 30px; 
  /* 替换display:none */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .75s, opacity .25s; /* 配合图片过渡的延迟 */
} 
.show-modal #popup { 
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity .25s; /* 取消延迟，立即显示背景 */
} 
#popup img { 
  display: block; 
  margin: auto; 
  position: relative; 
  top: -500px; 
  opacity: 0; 
  transition: top .5s .25s, opacity .25s; /* 调整延迟，让背景先显示再滑入图片 */
} 
.show-modal #popup img { 
  top: 0px; 
  opacity: 1; 
} 
#popup>div { 
  margin: auto; 
}

小说明 #

• 用visibility:hidden替代display:none，元素仍占据布局空间，但不可见；
• 给弹窗本身也加上过渡，配合图片的过渡延迟，让整体动画更流畅；
• 调整图片过渡的延迟时间，确保背景先显现，再让图片滑入，视觉效果更自然。

这样修改后，页面加载时点击小图片，弹窗的过渡效果就能正常触发了，不用再依赖开发者工具的“玄学修复”。

内容的提问来源于stack exchange，提问作者rosuav