javascript - 使用 Angular 中的 css 在 Safari 中为 'transform: scale()' 设置动画时出现不必要的延迟

Question

我构建了一个 Angular 应用程序，因为我正在尝试为图形的缩放和平行移动设置动画。我在缩放(缩放)和移动(平移)部分使用 css transform，在动画中使用 css transition。这在桌面浏览器(Windows 上的 Firefox 和 Chrome)中运行良好，但我在 IOS(iPad Air)上的 Safari 中遇到了不必要的延迟。这总是大约 2 秒左右并且不变。动画在该延迟后立即开始，并且似乎工作得很好。我注意到，如果我不使用缩放选项，延迟就会消失，但我不能不缩放整个 div，因为它需要匹配屏幕尺寸。

我曾尝试使用其他动画可能性，如 ng-animate ( https://github.com/jiayihu/ng-animate )，但可能该库的缩放功能也使用了比例，因为我遇到了同样的问题。

一些简化的代码:我首先使用缩放参数初始化组件:

scaleUI() {
  var previewArea: HTMLElement = document.querySelector(".previewArea");
  previewArea.style.transform = "scale(0.3, 0.3)";
  previewArea.style.webkitTransform = "scale(0.3, 0.3)";
}

点击我设置新的缩放参数并转换值:

var previewArea: HTMLElement = document.querySelector(".previewArea");

previewArea.style.transitionProperty = "transform";
previewArea.style.webkitTransitionProperty = "transform";
previewArea.style.transitionDuration = "1s";
previewArea.style.webkitTransitionDuration = "1s";
previewArea.style.webkitTransitionDelay = "0.1s";
previewArea.style.transitionDelay = "0.1s";
previewArea.style.transitionTimingFunction = "ease";
previewArea.style.webkitTransitionTimingFunction = "ease";

previewArea.style.webkitTransform = "scale(0.5, 0.5)translate(-" + value1 + "px, -" + value2 + "px)";

即使我在点击后移除了刻度，延迟仍然存在。只有当我完全移除该组件的比例时，延迟才会消失。

有人可以推荐另一种方法来进行可能不受此错误影响的缩放吗？或者有什么办法可以解决这个问题？

使用的 iPad 是运行 iOS 12.3.1 的 iPad Air 3。 iOS 12.3 上的 iPad Air 2 也有同样的问题。iOS 11.4 上的 iPhone 7 不存在延迟。

Answer 1

我后来修复了这个错误。不是通过使用另一种方法来缩放，而是通过更改背景图像。我使用了一个文件大小很大的背景图片。这似乎在移动设备上产生了延迟。当我将背景图像更改为较小的图像时，延迟消失了。