时间戳

首页 > 解决方案 > 动画大图像在 Safari 上无法正常工作

css - 动画大图像在 Safari 上无法正常工作

问题描述

我有一个大而宽的图像，我正在使用 CSS 制作动画。该图像在 Chrome（桌面和 Android 上）和 Firefox 上按预期显示和动画。

但是，在 Safari（桌面版和移动版，v12.1）上，图像通常没有动画效果，或者更糟 - 部分显示/根本不显示 - 在初始加载时。刷新一两个页面后，它开始按预期运行（可能是因为它从缓存加载图像）。

禁用动画后，图像在初始加载时显示良好。

演示
源代码

任何想法为什么 Safari 会这样？

标签： csssafariwebkitcss-animations

解决方案

我最终通过 JavaScript 加载图像，使其在 Safari 上正确显示和动画。这并不能解决问题的根源，但可以作为临时修复正常工作。

const imageElement = document.getElementById('image');
const image = new Image();

image.onload = function() {
  imageElement.src = image.src;
  imageElement.className = 'animation-class-name';
};
image.src = 'pic.jpg';

推荐阅读