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

Question

我构建了一个 angular 应用程序，我试图为图形的缩放和平行移动设置动画。我对缩放（比例）和移动（平移）部分使用 css 转换，对动画使用 css 转换。这在桌面浏览器（Firefox 和 Windows 上的 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 是 iPad Air 3 on iOS 12.3.1。 iPad Air 2 在 iOS 12.3 上也有同样的问题。 iOS 11.4.

iPhone 7 上不存在延迟

Answer 1

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

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

Unwanted delay at animating 'transform: scale()' in Safari with css in Angular

javascript

css

transition

scale

angular