在奇数位置制作动画时在 Chrome 中晃动图像

Posted 2023-05-08

【中文标题】在奇数位置制作动画时在 Chrome 中晃动图像

【英文标题】：Shaking images in Chrome when animating on odd positions

【发布时间】：2012-12-26 07:17:34

【问题描述】：

我正在尝试创建某种掩蔽动画，其中图像从其中心显露出来（edit:“中心”并不一定意味着实际背景图像的中心，而是可见区域的中心！/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 兼容的较大动画（多个图块）的一部分！

【问题讨论】：

我错过了什么吗？你为什么使用那个背景位置插件？为什么不直接删除它？像这样：jsfiddle.net/BaKTN/4

我使用它是因为在某些情况下内容不会居中。我想我应该提到这一点。

【参考方案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)
);

【讨论】：

嗯...这似乎无法解决第二种情况。

感谢您的回答。舍入背景位置确实也有帮助，尽管在处理动画内容时这可能会弄乱缓动（不确定在我的情况下这是否会成为问题）。将容器位置四舍五入当然也可以，但正如我所说，我正在寻找一个不涉及这样做的解决方案，主要是因为它实际上破坏了定位，还因为我无法控制所有的位置在 3rd 方环境中使用这些东西时可能的外部容器：/