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

Question

我正在尝试创建某种屏蔽动画,其中图像从其中心显示(编辑: "中心"不一定是指实际背景图像的中心,而是可见区域的中心!/编辑).它到目前为止工作正常,唯一的问题是在Chrome(目前在Windows 7 x64上为24.0.1312.52米)显示的内容正在震动.

这是一个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兼容!

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