CSS动画在iOS设备上无法运行，求问题原因排查

我编写了以下CSS动画，在桌面浏览器（即使调整窗口大小）中均能完美运行：

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #0e1624;
    overflow-y: hidden;
    overflow-x: hidden;
    animation: enable-scroll 0.1s forwards;
    color: white;
    scroll-behavior: smooth;
}

@keyframes enable-scroll {
    to {
        overflow-y: auto;
    }
}

#page-loader {
    animation: page-loaded 0.3s ease-in-out forwards;
    animation-delay: 2.5s;
}

@keyframes page-loaded {
    to {
        display: none;
    }
}

该动画在各类桌面浏览器中运行无异常，但在iOS手机端打开网站时，动画完全不运行，导致页面内容无法显示。请问可能的原因是什么？

核心原因分析 #

iOS Safari对CSS动画有两处关键限制，直接导致你的代码失效：

1. display属性无法通过CSS动画过渡：iOS Safari不支持在@keyframes中修改display属性，你的page-loaded动画试图将加载层的display改为none，这在iOS上完全不会生效，导致加载层一直遮挡页面内容。
2. overflow属性的动画支持不完善：虽然部分桌面浏览器允许动画修改overflow，但iOS Safari对这类非标准可动画属性的支持存在缺陷，enable-scroll动画无法将body的overflow-y从hidden切换为auto，导致页面始终无法滚动，内容被截断或隐藏。

修复方案 #

方案1：替换display动画为兼容属性动画 #

把加载层的动画改为修改opacity和visibility（这两个是iOS Safari支持的标准可动画属性）：

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0e1624; /* 和body背景保持一致，避免切换时闪烁 */
    animation: page-loaded 0.3s ease-in-out forwards;
    animation-delay: 2.5s;
}

@keyframes page-loaded {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* 防止透明后加载层仍拦截点击 */
    }
}

方案2：用JavaScript控制overflow切换 #

由于iOS Safari对overflow的动画支持不佳，改用JS来实现滚动开启逻辑，替代CSS动画：

// 模拟原动画0.1s的延迟后开启滚动
setTimeout(() => {
    document.body.style.overflowY = 'auto';
}, 100);

同时移除body上的animation: enable-scroll 0.1s forwards及对应的@keyframes enable-scroll代码。

额外优化建议 #

• 给body添加min-height: 100vh替代height: 100%，iOS Safari中100%高度的计算逻辑存在兼容性问题，100vh能更稳定地占满视口高度。
• 优先使用W3C标准定义的可动画属性（如opacity、transform、visibility等），避免依赖浏览器对非标准属性的特殊支持。

内容的提问来源于stack exchange，提问作者ElBeenMachine