ipad上Safari上的转场不工作

我写了一个简单的JavaScript代码。

它所做的，应用一个类'hide'的元素隐藏它(设置不透明度为0)，并删除类显示它(设置不透明度为1)。

通过css设置元素本身的过渡，持续时间设置为0.5s。

代码在MacOS上的所有浏览器，iOS上的所有浏览器(在我的iPhone上-包括Safari)上运行得非常好，除了iPad上的Safari !

我可以看到类在devtools中被应用和删除。元素消失又出现;没有任何过渡

更奇怪的是，Firefox, Edge和Chrome在同一台iPad上的过渡和代码表现得非常好!

我正在测试的iPad型号是:iPad Pro 12.9"M1;

15.5版。有人熟悉这个问题吗?

感谢您的宝贵时间。

示例代码:

const img = document.querySelector('img');
function loadImage(src) {
return new Promise((resolve, reject) => {
try {
if (!src || typeof src !== 'string') throw new Error('src invalid');

img.onload = () => {
img.onload = null;
img.onerror = null;
resolve(img);
}
img.onerror = () => {
img.onload = null;
img.onerror = null;
reject(img);
}

img.src = src;
}
catch(error) {
reject(error);
}
});
}
function fadeElement(element, hide = true) {
return new Promise((resolve, reject) => {
try {
if (hide && element.classList.contains('hide')) return resolve(element);
if (!hide && !element.classList.contains('hide')) return resolve(element);

if (hide) element.classList.add('hide');
else element.classList.remove('hide');

element.ontransitionend = () => {
element.ontransitionend = null;
resolve(element);
}
}
catch(error) {
reject(error);
}
});
}

async function setImage({src, alt}) {
try {
if (!src || typeof src !== 'string') throw new Error('src invalid');

img.alt = alt || '';

await fadeElement(img, true);
await loadImage(src);
await fadeElement(img, false);

}
catch(error) {
console.error(error);
}
}
setImage({src: "https://images.unsplash.com/photo-1654378550791-5360093aaf31?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNzN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", alt: "image 1"})
.then(()=> {console.log('image loaded')})
.catch((error) => {throw error});

const interval = setInterval( () => {
try {
const srcs = [
{src: "https://images.unsplash.com/photo-1654581066394-18d9549f760b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", alt: "image 1"},
{src: "https://images.unsplash.com/photo-1654561610761-dd76686ad98d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", /* alt: "image 2" */},
{src: "https://images.unsplash.com/photo-1654578870260-4fdae0cc4f6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", alt: "image 3"},
{src: "https://images.unsplash.com/photo-1654525482694-af1b5e9df569?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzOHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", /* alt: "image 4" */},
{src: "https://images.unsplash.com/photo-1654513286952-85d043b0c323?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2OHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", alt: "image 5"},
{src: "https://images.unsplash.com/photo-1654485604630-d39cc0bab3e3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3OHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", alt: "image 6"},
{src: "https://images.unsplash.com/photo-1654525217823-7af9e520050c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4MXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", alt: "image 7"},
{src: "https://images.unsplash.com/photo-1654521957182-f0277b65005a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5MXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", alt: "image 8"},
{src: "https://images.unsplash.com/photo-1654510916856-7533a3b4c368?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5OXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60", alt: "image 9"},
{src: "https://images.unsplash.com/photo-1654512378443-f14098061c83?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", /* alt: "image 10" */},
{src: "https://images.unsplash.com/photo-1654513155873-3bfc341f14ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", alt: "image 11"},
{src: "https://images.unsplash.com/photo-1654511794450-e708aa031c43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", alt: "image 12"},
{src: "https://images.unsplash.com/photo-1654490762536-afdbb92c5bfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMzB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", /* alt: "image 13" */},
{src: "https://images.unsplash.com/photo-1654423625360-31dee119c5f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", alt: "image 14"},
{src: "https://images.unsplash.com/photo-1654446138056-8996ca1e96a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", alt: "image 15"},
{src: "https://images.unsplash.com/photo-1623333769926-a34d46b5fbdb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", /* alt: "image 16" */},
{src: "https://images.unsplash.com/photo-1654505203976-ada2d3e685f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", alt: "image 17"},
{src: "https://images.unsplash.com/photo-1654448190693-f59b70e5ee3c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNjl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60", alt: "image 18"},
];
function randomImage(images) {
return images[Math.floor(Math.random() * images.length)];
}
const newSrc = randomImage(srcs);
setImage(newSrc)
.then(()=> {console.log('image loaded')})
.catch((error) => {throw error});
}
catch (error) {
console.error(error);
}
}, 6500);

div {
height: 500px;
width: 500px;
position: relative;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
transition: 0.5s ease-in-out opacity;
}
.hide {
opacity: 0;
}

<div class="container">
<img src="" alt="">
</div>

CodePen

.custom-class{
visibility:hidden;
opacity: 0;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s; 
}
.custom-class.hide{
visibility:visible;
opacity: 1;
}

.custom-class{
opacity: 0;
}
.custom-class.hide{
opacity: 1;
-webkit-animation: custom-keyframe-in 0.5s;
animation: custom-keyframe-in 0.5s;
}
@-webkit-keyframes custom-keyframe-in {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes custom-keyframe-in {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}