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 ？

附言。请注意，这是为了成为需要保持 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位置转换为（整个）像素而不是百分比将修复第二种情况，但在调整窗口大小时它不会调整其位置：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 回答