I narrowed down my problem to a fairly simple case. This works (at least in Chrome) by displaying a "pop-up window" that is mostly off-screen, with a slice of the right side of the screen. When I hover over the visible part, a popup popup is displayed:
<!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 this exact CSS to 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 unchanged, but when the page loads, a pop-up window appears "slipped out" and makes it easier to turn off the screen. Using the style directly in the <style> on the html page, as in the first example, this does not happen; The popup starts up "off", that is, in left: -180px , as I expected.
I wonder if this is a “flash of unrelated content,” with the added annoyance that due to the transition effect it is actually a very obvious slow effect?
Could someone tell me for sure why this is happening, and what is the least dangerous way to avoid this?
Due to how jsfiddle works, I cannot reproduce the problem there, unfortunately.