当用户放大或缩小时，jQuery 动画在 Chrome/Safari 上的行为异常

Posted 2023-05-08

技术标签:

【中文标题】当用户放大或缩小时，jQuery 动画在 Chrome/Safari 上的行为异常【英文标题】：jQuery animations misbehave on Chrome/Safari when the user zooms In or out 【发布时间】：2011-05-14 06:48:07 【问题描述】：

我想向我们的几位设计师展示一个 jQuery 动画的快速模型，特别是一个可以创建一个对象在另一个对象下方移动的外观。

在我设置的示例中，一张 100 美元的钞票在一张透明的 .png 纸下方移动，纸上挖了一个洞。两个元素都设置了绝对定位，纸张.png的z-index更高。

一切似乎都运行良好，但我注意到在 Chrome 和 Safari 上放大或缩小会影响定位。

我已经在此处发布了示例：

http://tdm-analytics.com/js/examples/example-1.html

您会注意到，如果您放大或缩小并刷新，垂直定位会关闭。

代码在这里：

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="http://tdm-analytics.com/js/examples/jquery-1.4.4.js"></script>
    <script>
        $(document).ready(function() 
            $("#100").animate("top":"-=610px", 3000);
        );
    </script>
</head>
<body>
    <div id="envelope" style="position:absolute;margin-right:-195px;right:50%;top:200px;z-index:9999;">
        <img src="http://tdm-analytics.com/js/examples/bkhtornframe.png" />
    </div>
    <div id="100" style="position:absolute;margin-right:-190px;right:50%;top:630px;z-index:1;">
        <img src="http://tdm-analytics.com/js/examples/100-dollar-bill.jpg" />
    </div>
</body>
</html>

不确定这是我做错了什么还是 jQuery 问题。如果有人知道解决方法，我将非常感谢您的帮助。

【问题讨论】：

我已经看到很多很酷的 jQuery/Javascript/CSS 动画都会发生这种情况。据我所知，没有简单的解决方法。 【参考方案1】：

使用边距，例如margin_left 水平动画，当 chrome/safari [和其他] 被放大时有效。

【讨论】：

【参考方案2】：

我认为 chrome 中的动画没有问题。没试过 Safari，因为它和 chrome 一样是 web kit。

或者您是指放大时出现在某些屏幕分辨率上的浏览器滚动条？

【讨论】：

如果你放大或缩小并刷新它会抛出垂直定位。

以上是关于当用户放大或缩小时，jQuery 动画在 Chrome/Safari 上的行为异常的主要内容，如果未能解决你的问题，请参考以下文章

Safari SVG 变换原点缩放动画