Safari浏览器忽略CSS动画中opacity属性变更问题求助

大家好，之前这个加载动画效果一直正常运行，但最近我在iOS Safari上打开网站时，发现它出问题了——估计是浏览器更新导致的。我在笔记本的Safari上也测试了，同样有问题，但Chrome和Firefox里表现完全正常。

简单说下需求：这是个页面加载完成后的过渡动画，动画结束后需要把加载层设置opacity: 0;来隐藏它（毕竟加载完成后就不需要显示这个层了）。我把代码简化成了彩色盒子的示例，你能看到Safari完全不搭理动画最后一步的opacity属性变更，但其他属性比如scale是正常生效的。原本的完整动画还有缩放逻辑，我保留了这部分，虽然单独看这个简化示例里缩放有点无厘头，但至少能证明其他CSS声明是被正常识别的。

有没有大佬知道突然出现这个问题的原因？提前谢过大家了！

问题复现代码： #

<style>
.pixel-load {
  background: #f00;
  display: block;
  height: 400px;
  width: 300px;
}

.pixel-load__preload {
  background: #00f;
  display: block;
  height: 100%;
  width: 100%;
}

.pixel-load.loaded .pixel-load__preload {
  animation: loaded .32s .16s steps(1, end) both;
}

@keyframes loaded {
  0% {
    scale: 1.6;
  }
  33% {
    scale: 1.2;
  }
  66% {
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1;
    z-index: 1;
  }
}
</style>

<div class="pixel-load loaded">
  <div class="pixel-load__preload"></div>
</div>

内容来源于stack exchange