CSS transition defined in external stylesheet causes transition on page load

问题

I've narrowed down my issue to a fairly simple case. This works (in Chrome, at least), displaying a "pop-up" which is mostly off-screen, with a slice of the right hand side on screen. When I hover over the visible part, the whole pop-up slides into view:

<!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>

However, if I then move that exact CSS into an external stylesheet:

<!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;
}

...the effect remains the same, but on page load the pop-up appears "popped out" and eases back off screen. With the style directly in a <style> in the html page, as in the first example, this doesn't happen; the pop-up starts "off screen", i.e. at left: -180px as I would expect.

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.

回答1:

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.

来源：https://stackoverflow.com/questions/6385891/css-transition-defined-in-external-stylesheet-causes-transition-on-page-load

标签

css

google-chrome

css3

webkit

css-transitions