6

画像が中心から見えるようなマスキングアニメーションを作成しようとしています（編集：「中心」は必ずしも実際の背景画像の中心を意味するのではなく、表示領域の中心を意味します！/ edit）。これまでのところ正常に動作していますが、唯一の問題は、Chrome（現在Windows 7 x64では24.0.1312.52m）で表示されるコンテンツが揺れていることです。

jsfiddleの例を次に示します：http：//jsfiddle.net/BaKTN/

これまでのところ、これは無効にしないことで修正できることがわかりましたbackground-repeat（http://jsfiddle.net/BaKTN/1/）。内部で正確に何が起こっているのかはわかりませんが、これにより画像は元の場所にとどまります。残念ながら、これは問題の半分にすぎません。外側のコンテナが奇数の座標に配置されたときに再び揺れることがあります。これは、たとえば、パーセンテージベースのポジショニングを使用している場合に発生する可能性があります（少なくとも内部的には座標が奇数になる可能性があります）。

この動作を示す別のjsfiddleの例を次に示します。http：//jsfiddle.net/VbgXB/

編集：固定位置を使用すると、奇妙な座標を引き起こす外部コンテナが多い場合でも、すべてが正常に見えるので役立つようです。ただし、この回避策は、スクロールを台無しにするため、もちろん条件付きでのみ役立ちます： http ://jsfiddle.net/BaKTN/5/ 。だから私はまだ別のトリックを探しています。/編集

実際にこの問題を引き起こしているものと、コンテナの座標を変更せずにそれを回避する方法についてのアイデアはありますか？これはこのバグと関係があるかもしれません：http ：//code.google.com/p/chromium/issues/detail？id = 140038 ？

ps。これは、CSS2との互換性を維持する必要がある、より大きなアニメーション（複数のタイル）の一部になるためのメントであることに注意してください。

4

1 に答える 1

5

これはおそらく、背景位置の部分的なピクセル値が原因です。値を丸めると修正されるようです: http://jsfiddle.net/BaKTN/2/

(function($) {
  $.extend($.fx.step,{
    backgroundPosition: function(fx) {
      if (typeof fx.end == 'string') {
        var start = $.css(fx.elem,'backgroundPosition');
        start = toArray(start);
        fx.start = [start[0],start[2]];
        var end = toArray(fx.end);
        fx.end = [end[0],end[2]];
        fx.unit = [end[1],end[3]];
      }
      var nowPosX = [];

関連コード

      nowPosX[0] = Math.round(((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0]) + fx.unit[0];
      nowPosX[1] = Math.round(((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1]) + fx.unit[1];

終了 関連コード

      fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

      function toArray(strg){
        strg = strg.replace(/left|top/g,'0px');
        strg = strg.replace(/right|bottom/g,'100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
      }
    }
  });
})(jQuery);

編集— 位置をパーセンテージではなく (全体の) ピクセルに変換する#containerと、2 番目のケースは修正されますが、ウィンドウのサイズが変更されたときに位置が調整されません: http://jsfiddle.net/VbgXB/1/

var $con = $("#container");
$con.css({
  left: Math.round($con.position().left),
  top: Math.round($con.position().top)
});
于 2013-01-11T16:54:25.410 に答える