Home/ Questions/Q 6048457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:27:55+00:00

I’ve narrowed down my issue to a fairly simple case. This works (in Chrome,

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0