4

我已将我的问题缩小到一个相当简单的案例。这有效（至少在 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;
}

...效果保持不变，但在页面加载时弹出窗口出现“弹出”并缓和屏幕。将样式直接放在<style>html 页面中的 a 中，就像在第一个示例中一样，这不会发生；弹出窗口开始“关闭屏幕”，即left: -180px如我所料。

I'm wondering if this is a "flash of unstyled content", with the added annoyance that because of the transition effect, it's actually a very obvious, slow effect?

Can anyone tell me for sure why this happens, and what's the least hacky way to avoid it?

Because of the way jsfiddle works, I can't reproduce the problem there, unfortunately.

4

1 回答 1

3

Thanks, @easwee, for help in confirming what the problem wasn't :) I've now tracked down what's causing the problem. It was the AdBlock extension for Chrome. If I disable this extension, I don't see the problem.

In case it's helpful for anyone else tracking down this problem, you can quickly test to see if an extension is causing an issue by using a new "Incognito" window -- all extensions are disabled for Icognito windows in Chrome.

于 2011-06-18T23:30:39.803 回答