0

おそらく、これをクロムのバグとして記録する必要がありますが、問題の解決策があるかどうかを確認するためにここをチェックすると思いました.

CSS3 を使用して、親 div の背景にアニメーションを含む単純な選択リストがあります。ドロップダウン リストを開いて別のオプションの上にマウスを移動すると、特にリストの最後の項目でマウスを移動すると、青いバー (ホバー) がジャンプします。

HTML:

<div id="backgroundContainer">
<select >
<option value="">-- Select a Test Case --</option>
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
<option value="4">Test4</option>
<option value="5">Test5</option>
<option value="6">Test6</option>
<option value="7">Test7</option>
<option value="8">Test8</option>
</select>
</div>

CSS:

#backgroundContainer {
background-repeat: no-repeat;
background-color: #CCC;
background-image:url("https://appharbor.com/assets/images/stackoverflow-logo.png");
color: #fff;
height:500px;
width:100%;
-webkit-animation: moveUpDown 240s infinite linear;
}
@keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}
@-webkit-keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}

ここで jsFiddle を作成しました: http://jsfiddle.net/ZfQU5/上記のコードを使用します。

何か間違ったことをしていないか、または回避策があるかどうかを確認してください。もちろん、バックグラウンド アニメーションを削除することもできますが、とにかくジャンプするのは奇妙です。

ありがとう、

4

4 に答える 4

1

マイク、

はい、ドロップダウンメニューだけでなく、ページ全体が Chrome でジャンプし、Chrome dev でもジャンプします。バグではありません。マークアップが間違っています。IE はキーフレームまたは -webkit-keyframes をまだ理解していないため、IE ではジャンプしません。ジャンプはそこからです。メニューが内部にネストされていますタグなので、メニューがジャンプします。Chrome で dev を有効にした場合と無効にした場合、IE9、FF でテストしましたが、後で IE10 と Opera を実行して、このコーディングにどのように反応するかを確認しますが、同じになると確信しています。

私の質問は次のとおりです。

  1. どのようなアニメーションを実現しようとしていますか?
  2. ドロップダウンの選択肢の 1 つからアクションを起動しますか?
  3. 2 つの文書を用意するつもりですか? 1 つの .html と 1 つの .css または .html 内のすべてのコードをドロップして 1 つのファイルを作成しますか?

私はすべてのコードを修正し、あなたがやろうとしていたと思うように動作させましたが、それはあなたが望んでいたことをしたと仮定しています.

ジェイソン

于 2013-04-24T23:38:55.227 に答える
0

マイク、

ここにいくつかのコードがあります。ボックスはそのままにしておいて、CSS ルールに従うだけで問題ありません。

CSS3:

#backgroundContainer {
   width:100%;
   height:500px;
   position:relative;
   background: #CCCCCC url("https://appharbor.com/assets/images/stackoverflow-logo.png") no-repeat;
   animation: myOption 5s infinite linear;
   -webkit-animation: myOption 5s infinite linear; 
     }

@-keyframes mymove
      {
      0%    {background:left:0px; top:0px;}
      25%   {background:left:0px; top:-250px;}
      50%   {background:left:0px; top:500px;}
      75%   {background:left:0px; top:-250px;}
      100%  {background:left:0px; top:0px;}
      }

/* Safari and Chrome */
@-webkit-keyframes mymove
      {
      0%    {background:left:0px; top:0px;}
      25%   {background:left:0px; top:-250px;}
      50%   {background:left:0px; top:500px;}
      75%   {background:left:0px; top:-250px;}
      100%  {background:left:0px; top:0px;}
      }

そして、これがhtmlです。

    <!DOCTYPE html>
    <html lang="en">
    <!-- <head>
      <link rel="stylesheet" type="text/css" href="css/bgContainer.css" /> 
    </head> -->
      <div id="backgroundContainer">
        <select >
            <option id="select" value="">-- Select a Test Case --</option>
                <option id="ov1" value="1">Test1</option>
                <option id="ov2" value="2">Test2</option>
                <option id="ov3" value="3">Test3</option>
                <option id="ov4" value="4">Test4</option>
                <option id="ov5" value="5">Test5</option>
                <option class="ov6" value="6">Test6</option>
                <option id="ov7" value="7">Test7</option>
                <option id="ov8" value="8">Test8</option>
                <option id="ov9" value="9">Test9</option>
                <option id="ov10" value="10">Test10</option>
        </select>
      </div>  
    </html>

You'll have to reset your timer, and your CSS import link, I didn't want to wait 240s every time I ran it.

そのコードはここにあります: CodePen

WebPlatform.org

W3C.org

ジェイソン

于 2013-04-27T04:31:32.823 に答える