2

Firefox と Chrome の両方でこれを見てください:

http://jsfiddle.net/enne87/AwGfs/1/

テキストをクリックすると、単純な slideToggle() アニメーションでテキストが消えるはずです。FFでこれを行うとうまく機能しますが、Chromeでは背景画像にアーティファクトが作成されます。誰かが私が間違っていることを説明してくれることを願っています。

どうもありがとう、

エンネ

編集：Safariでも同じ動作でこれを試しました。

4

2 に答える 2

2

問題はにあるようbackground-positionです。私がそれを絶対的なものに変えるとき、それは働きます。また、@ jcalabrisのコードに追加すると、問題が発生します：http: //jsfiddle.net/AwGfs/30/

回避策として、背景を絶対に配置することをお勧めします。

ChromeまたはWebKitのバグトラッカーでも報告する必要があります。

于 2012-09-07T13:02:15.193 に答える
2

スタイルタグを使用して昔ながらの方法でcssを設定するのではなく、jqueryでcssを設定しているという事実と関係があると思います。私はかなりきれいなアニメーションを得ることができました:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AG-App!</title>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js">    </script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript">
    </script>
    <style type="text/css">
      body { background: #ffffff url('http://advancedata.ad.funpic.de/bg.png') no-repeat left top; background-attachment: scroll; background-size: 100%;}        
    </style>  
</head>
<body>

    <div>
      <p id="test">Click here to see that<br />in chrome this is going to <br /> create artifacts.</p>
    </div>

</body>
</html>

また、div から id を取得し、テキストをその id を持つ独自の「p」タグに入れました。これは、div 自体ではなく、テキストを非表示にする必要があるためです。また、Google API の更新された jquery ライブラリも使用しました。お役に立てれば。</p>

ここに私の例がありますhttp://jsfiddle.net/AwGfs/29/

于 2012-09-07T12:52:54.593 に答える