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

...効果は同じままですが、ページの読み込み時にポップアップが「飛び出して」表示され、画面から元に戻ります。最初の例のように、html ページの直接スタイルでは<style>、これは起こりません。ポップアップは「画面外」で開始されます。つまり、left: -180px予想どおりです。

これは「スタイルのないコンテンツのフラッシュ」であり、遷移効果のために実際には非常に明白で遅い効果であるという煩わしさが追加されているのではないかと思いますか?

なぜこれが起こるのか、そしてそれを回避するための最もハックな方法は何ですか?

残念ながら、jsfiddle の動作方法が原因で、そこで問題を再現することはできません。

4

1 に答える 1

3

ありがとう、@easwee、問題が何ではないかを確認するのに役立ちました:)問題の原因を突き止めました。ChromeのAdBlock拡張機能でした。この拡張機能を無効にすると、問題は発生しません。

他の誰かがこの問題を追跡するのに役立つ場合は、新しい「シークレット」ウィンドウを使用して、拡張機能が問題を引き起こしているかどうかをすばやくテストできます。Chrome の Icognito ウィンドウではすべての拡張機能が無効になっています。

于 2011-06-18T23:30:39.803 に答える