我使用CSS构建了一个简单的对话框/弹出窗口。
其初始状态(关闭时(为opacity: 0。
当对话框打开时(使用:target(，我设置opacity: 1。
我正在使用transition: opacity 2s来使过渡平滑。
我已经使用这个对话框CSS很多年了，但今天注意到，在页面加载时，Chrome会将对话框从opacity: 1转换为opacity: 0的初始状态。
这种情况以前从未发生过。
如果我把HTML中的CSS放在style元素中，就不会发生这种情况。
为什么会发生这种情况？它是什么时候开始发生的(在哪个版本的Chrome中？(据我所知，这显然是一个bug(在Chrome/Webkit中(？我怎样才能阻止它的发生？(我的电话是86.0.4240.75 btw(
外部样式表示例，您可以在其中看到错误
带有样式元素的示例，其中错误不会发生
(注意，您可能需要进行硬刷新才能体验错误(
有问题的CSS；
div.dialog {
/* Size - not too wide, not too tall */
box-sizing: border-box;
width: 90%;
max-width: 40rem;
max-height: 90%;
/* Position on top of everything */
position: fixed;
overflow: auto;
z-index: 101;
/* In the center of the viewport */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* For looking "good" */
background: white;
padding: 3rem;
border: 1px solid black;
/* When closed */
/* NOTE: This is where things go wrong, even though opacity: 0; is set here initially, for some reason Chrome renders the element with opacity: 1 and then transitions to 0, this does _not_ happen if this CSS is inside a style element */
pointer-events: none;
opacity: 0;
transition: opacity 2s ease;
}
/* When open */
div.dialog:target {
pointer-events: all;
opacity: 1;
}
编辑：我现在也将a {color: red; transition: color 2s}添加到样式表中。链接也发生了同样的事情，它在页面加载时从蓝色/紫色(如果你已经访问过它(转换为我指定的红色。
编辑：https://bugs.chromium.org/p/chromium/issues/detail?id=1136630
此问题与重复
只需在html中添加一个空的script标记就可以解决这个问题。但您至少应该附加一个字符。
<script> </script>