CSS-переход, определенный во внешней таблице стилей, вызывает переход при загрузке страницы - PullRequest
Новая
       13

CSS-переход, определенный во внешней таблице стилей, вызывает переход при загрузке страницы

4 голосов
/ 17 июня 2011

Я сузил свою проблему до довольно простого случая.Это работает (по крайней мере, в 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-странице, как в первом примере, этого не происходит;всплывающее окно запускается «за пределами экрана», то есть на left: -180px, как я и ожидал.

Мне интересно, является ли это «вспышкой нестандартного контента», с добавленной досадой из-за переходаэффект, на самом деле это очень очевидный, медленный эффект?

Кто-нибудь может сказать мне наверняка, почему это происходит, и каков наименьший хакерский способ избежать этого?

Из-за того, как работает jsfiddle,Я не могу воспроизвести проблему там, к сожалению.

1 Ответ

3 голосов
/ 19 июня 2011

Спасибо, @easwee, за помощь в подтверждении, в чем проблема не была :) Теперь я выяснил, что является причиной проблемы.Это было расширение AdBlock для Chrome.Если я отключу это расширение, я не увижу проблему.

В случае, если это кому-то еще понадобится для отслеживания этой проблемы, вы можете быстро проверить, вызывает ли расширение проблему с помощью нового "Окно «Инкогнито» - все расширения отключены для окон Icognito в Chrome.

...