外部样式表中定义的googlechrome-CSS转换导致页面加载时的转换

我已经将问题缩小到一个相当简单的案例中。这是有效的（至少在Chrome中），显示一个"弹出窗口"，它大部分在屏幕外，屏幕上有一块右手边。当我将鼠标悬停在可见部分上时，整个弹出窗口滑入视图：

<!DOCTYPE html>
<html>
<head>
  <title>Popout test</title>
  <style>
  #popout {
    -webkit-transition: left 0.5s ease-in-out;
    width: 200px;
    height: 200px;
    background-color: #cde;
    border: 4px solid black;
    padding: 4px;
    left: -180px;
    position: absolute;
    top: 250px;
  }
  #popout:hover {
    left: -4px;
  }  
  </style>
</head>
<body>
  <div id="popout">This is a test</div>
</body>
</html>

但是，如果我把这个CSS移到一个外部样式表中：

<!DOCTYPE html>
<html>
<head>
  <title>Popout test</title>
  <link rel="stylesheet" href="popout.css" />
</head>
<body>
  <div id="popout">This is a test</div>
</body>
</html>

popout.css:

#popout {
    -webkit-transition: left 0.5s ease-in-out;
    width: 200px;
    height: 200px;
    background-color: #cde;
    border: 4px solid black;
    padding: 4px;
    left: -180px;
    position: absolute;
    top: 250px;
}
#popout:hover {
  left: -4px;
}

效果保持不变，但在页面加载时，弹出窗口显示为"弹出"，并轻松退出屏幕。与第一个示例一样，样式直接在html页面的<style>中，这不会发生；弹出窗口开始"屏幕外"，即在left: -180px，正如我所期望的那样。

我想知道这是否是一个"无风格内容的闪光"，更令人烦恼的是，由于过渡效果，它实际上是一个非常明显的、缓慢的效果？

有人能确切地告诉我为什么会发生这种情况吗？避免这种情况的最简单方法是什么？

不幸的是，由于jsfiddle的工作方式，我无法在那里重现这个问题。

感谢@easwe帮助确认问题不是什么：）我现在已经找到了问题的原因。这是Chrome的AdBlock扩展。如果我禁用这个扩展，我看不出问题。

如果这对追踪这个问题的其他人有帮助，你可以使用一个新的"隐身"窗口快速测试扩展是否导致了问题——Chrome中的所有扩展都被禁用了。

相关内容

最新更新

热门标签：