我有一个大而宽的图像,我正在使用 CSS 制作动画。该图像在 Chrome(桌面和 Android)和 Firefox 上按预期显示和动画。
但是,在 Safari(台式机和移动设备,v12.1)上,图像通常没有动画效果,或者更糟的是 - 在初始加载时部分显示/根本不显示。一两次页面刷新后,它开始按预期运行(可能是因为它从缓存中加载了图像)。
禁用动画后,图像在初始加载时显示正常。
知道为什么 Safari 会这样吗?
最佳答案
我最终通过 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';
关于css - 动画大图像在 Safari 上无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55673434/