Chrome中视口外iframe内CSS动画延迟启动的问题求助

我们有一款类似Instagram故事的产品，包含带进度条的多视频模块，嵌入合作网站的iframe中，默认自动播放，进度条采用纯CSS动画实现。核心异常：iframe在视口外时，视频能正常启动播放，但CSS进度条动画仅在iframe进入视口才开始运行。

复现步骤 #

1. 点击页面上的「reload iframe」按钮
2. 等待几秒后向下滚动页面
3. 观察到进度条仅在iframe进入视口范围时才开始动画

相关代码 #

父页面HTML #

<button onclick="resetIframe()">reload iframe</button>
scroll down to see animations
<iframe id="iframe" style="margin-top: 110vh; height: 100px; display: block;" src="https://clipr.opsolutions.ro/animation.html" frameborder="0"></iframe>

父页面JavaScript #

var url = "https://clipr.opsolutions.ro/animation.html"
function resetIframe() {
    iframe.src = ""

    window.setTimeout(() => {
        iframe.src = url
        console.log("done")
    }, 100)
}

问题根源 #

这是浏览器的离屏元素性能优化机制导致的：为了节省CPU/GPU资源，浏览器会自动暂停处于视口外的元素的CSS动画，直到元素进入视口才恢复执行。而视频播放不受此限制，因为媒体播放的定时器是独立于渲染线程的。

解决方案 #

1. 改用JavaScript驱动进度条（推荐） #

放弃纯CSS动画，通过监听视频播放事件实时计算进度，直接控制进度条样式：

// iframe内部代码
const video = document.querySelector('video');
const progressBar = document.querySelector('.progress-bar');

// 视频加载完成后初始化
video.addEventListener('loadedmetadata', () => {
    const updateProgress = () => {
        if (!video.duration) return;
        const progressPercent = (video.currentTime / video.duration) * 100;
        progressBar.style.width = `${progressPercent}%`;
        requestAnimationFrame(updateProgress);
    };
    updateProgress();
});

这种方式完全绕开浏览器的CSS动画暂停机制，进度与视频播放完全同步，兼容性最好。

2. 用will-change提示浏览器优化 #

在iframe页面的进度条CSS中添加will-change属性，提示浏览器该元素需要持续更新，避免暂停动画：

.progress-bar {
    animation: progress 5s linear forwards;
    will-change: width; /* 告知浏览器该元素属性会频繁变化 */
}

注意：部分浏览器可能仍会忽略该提示，仅作为辅助优化手段。

3. 监听可见性同步进度 #

在iframe内部监听页面可见性变化，当元素从不可见变为可见时，手动同步进度条与视频播放进度：

// iframe内部代码
const video = document.querySelector('video');
const progressBar = document.querySelector('.progress-bar');

document.addEventListener('visibilitychange', () => {
    if (!document.hidden && video.duration) {
        const playedRatio = video.currentTime / video.duration;
        // 调整动画延迟，让进度条直接跳到对应位置
        progressBar.style.animationDelay = `-${playedRatio * video.duration}s`;
    }
});

这种方式保留原有CSS动画，仅在可见性变化时修正进度，适合不想重构动画的场景。

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