javascript - 在奇数位置设置动画时在 Chrome 中抖动图像

Question

我正在尝试创建某种掩蔽动画，其中图像从其中心显示(编辑:“中心”不一定表示实际背景图像的中心，但可见区域的中心!/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 ？

附言。请注意，这是为了成为需要保持 CSS2 兼容的更大动画(多个图 block )的一部分!

Answer 1

这可能是由于背景位置的部分像素值所致。舍入值似乎可以解决它: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 位置转换为(整)像素而不是百分比将解决第二种情况，但它不会在窗口打开时调整其位置调整大小:http://jsfiddle.net/VbgXB/1/

var $con = $("#container");
$con.css({
  left: Math.round($con.position().left),
  top: Math.round($con.position().top)
});