时间戳

首页 > 解决方案 > 使用外部样式表时，Chrome 在页面加载时从默认属性值转换为指定值

css - 使用外部样式表时，Chrome 在页面加载时从默认属性值转换为指定值

问题描述

我使用 CSS 构建了一个简单的对话框/弹出窗口。

它的初始状态（关闭时）有opacity: 0.

当对话框打开（使用:target）时，我设置了opacity: 1.

我transition: opacity 2s用来使过渡平稳。

我已经使用这个对话框 CSS 多年了，但今天注意到在页面加载时 Chrome 会将对话框opacity: 1从opacity: 0.

这在以前没有发生过。

style如果我将 CSS 放在元素内的 HTML 中，则不会发生这种情况。

为什么会这样？它是什么时候开始发生的（在哪个版本的 Chrome 中？）据我所知，这显然是一个错误（在 Chrome/Webkit 中）？我怎样才能阻止它发生？（我在 86.0.4240.75 顺便说一句）

带有外部样式表的示例，您可以在其中看到错误

没有出现错误的样式元素示例

（请注意，您可能需要进行硬刷新才能体验该错误）

有问题的 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

标签： csscss-transitions

解决方案

它与这个问题重复

您只需向 html 添加一个空的脚本标签即可解决此问题。但是您至少应该附加一个字符。

<script> </script>

推荐阅读