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

Question

在我的 html 文档中，有一些带有两张图片的图块（一张 jpg 作为背景，一张具有透明度的 png 作为前景）并具有悬停效果： 在您悬停的当前磁贴上，图像会缩放到鼠标所在的位置，并且前面的图像会远离光标。

在仅水平移动光标时，所有垂直图片也会动画化，反之亦然。

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

http://jsfiddle.net/Lmcn0sxw/6/

效果有效（有一些错误，但这并不重要）。

使用 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)');

您可以在 jsfiddle 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)'
);

在 Linux Mint 上的 Google Chrome 浏览器中，它运行良好。在 Windows 上的 Google Chrome 上，它也可以工作。在 Mozilla Firefox 中，它不如在 Google Chrome 中那么完美，但没关系。

实际问题

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

如何测试或找出这是什么原因造成的？这不可能是他们使用的计算机的性能，因为具有相同效果的this site在所有浏览器中都能完美运行，无论操作系统如何。

我尝试了什么

首先，我使用translate 而不是translate3d（我读到后者更快），但它没有帮助。

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

第二个问题

在 Safari 上（我在 v8.0.7 中尝试过），matrix3d 转换工作，但所有其他转换都不起作用，不是在当前磁贴上，也不是在其他磁贴上，但CanIUse 告诉我 transform3d 是受支持的通过 Safari 8。当我使用 matrix3d 转换检查项目时，我可以在 DOM 树中看到它正在更新，但是来自 .back 或 .front 的所有元素，我看不到添加的 transform3d，我不知道如何解决这个问题。

Answer 1

我相信这是您滞后的原因 - offset = self.offset()。 在每一帧上查询 DOM，这会强制它渲染布局，并导致卡顿。 而是在动画开始之前读取一次偏移量。

你也可以在动画开始之前给每个元素添加 will-change:transform。