Javascript 悬停效果适用于大多数浏览器，但不适用于MAC上的safari或chrome浏览器

在我的html文档中，有一些具有两张图片（一张jpg作为背景，一张png作为前景，透明）和悬停效果的平铺： 在当前鼠标悬停的平铺上，图像在鼠标所在位置缩放，前面的图像从光标移开

当仅水平移动光标时，所有垂直图片也会设置动画，反之亦然

下面是一个包含所有html、javascript和css的示例：

效果是有效的（有一些bug，但这并不重要）

使用javascript和transform3d可以轻松添加动画，其中

item

是类

.item

的当前磁贴。 像

topRatioFron

这样的变量是从当前鼠标相对于当前磁贴的位置计算出来的

item.find('.front').css('transform', 'translate3d(0,' + topRatioFront + 'px,0)');
item.find('.back').css('transform', 'translate3d(0,' + topRatioBack + 'px,0)');

在JSFIDLE javascript代码中可以看到一些变体

主平铺将使用matrix3d效果设置动画：

self.find(itemClass).css(
    'transform', 
    'matrix3d(1,0,0.00,' + leftRatio + ',0.00,1,0.00,' + topRatio + ',0,0,1,0,0,0,0,1)'
);

在LinuxMint上的GoogleChrome浏览器中，它可以完美地工作。在Windows上的Google Chrome上，它也可以工作。在Mozilla Firefox中，虽然没有谷歌Chrome那么完美，但也没关系

实际问题 一个朋友用Safari在Mac上打开了这个网站，所有的动画都非常滞后（看起来像是在摇晃）。另一位朋友在Mac上的Chrome浏览器中打开了它，它也在颤抖，但这次不是在Safari中

我如何测试或找出这是什么原因？这不可能是他们使用的计算机的性能，因为在所有浏览器中，无论操作系统如何，都能以同样的效果完美地工作

我试过的 首先，我使用了

translate

而不是

translate3d

（我读到后者速度更快），但没有帮助

我后来添加了一个名为requestAnimationFrame的函数，它可以帮助渲染动画。结果是一样的

第二个问题

---

在Safari上（我在v8.0.7中试用过），matrix3d转换可以工作，但所有其他转换都不工作，不在当前磁贴上，也不在其他磁贴上，但告诉我Safari 8支持transform3d。当我使用matrix3d转换检查项目时，我可以在DOM树中看到它正在更新，但是

.back

或

.front

中的所有元素，我看不到添加的transform3d，我不知道如何修复此问题。

我认为这是延迟的原因-

offset=self.offset（）

。 在每个帧上查询DOM，这会强制它呈现布局，并导致口吃。 而是在动画开始之前读取一次偏移量

---

您还可以向每个元素添加将更改的内容：在动画开始之前进行变换。

CanIUse告诉我Safari支持变换属性（）。此外，我认为在Safari不支持的情况下，动画甚至不会启动。太棒了！！！！就这样。我投了赞成票，但之前有人对这个问题投了反对票。非常感谢你！我编辑了我的答案，因为我有另一个问题。我不认为

会改变

是必要的，因为

translate3d

已经是硬件加速了。不用担心-我对匆忙进来的忏悔。关于will change-据我所知，它可以为即将到来的动画准备浏览器，甚至是translate3d（它将在动画开始之前将其升级到一个层），啊，谢谢你的链接。你能阅读并回答我的第二个问题吗？