如何避免CSS过渡效果在Safari页面加载时自动触发？

我实现了一个简单的CSS平移过渡效果，用于控制内容滑入滑出，该效果在Chromium系浏览器中表现正常，但在Safari的新版本中，页面加载时过渡效果会自动触发。

浏览器表现差异 #

• Sonoma 14.5（23F79）+ Safari 17.5（19618.2.12.11.6）：✅ 表现正常
• Ventura 13.6.8（22G820）+ Safari 17.6（18618.3.11.11.7, 18618）：❌ 页面加载时自动触发过渡，效果异常

复现代码 #

JavaScript

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('main').classList.toggle('open')
})

CSS

main {
  background: green;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-100%);
}

main.open {
  transform: none;
}

HTML

<main>content</main>
<button>toggle</button>

请问这是否是Safari 17.6的回归问题？该如何修复？

修复方案 #

这确实是Safari 17.6的回归bug，浏览器在页面初始化阶段错误地将初始样式的渲染判定为状态变化，从而触发了过渡效果。以下两种方案可以解决该问题：

方案1：延迟添加过渡属性 #

初始不在CSS中设置过渡，等页面完全加载后再通过JavaScript为元素添加过渡样式：

// 页面加载完成后启用过渡
window.addEventListener('load', () => {
  document.querySelector('main').style.transition = 'transform 0.5s ease-in-out';
});

// 原有切换逻辑保持不变
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('main').classList.toggle('open')
})

修改后的CSS：

main {
  background: green;
  transform: translateX(-100%);
}

main.open {
  transform: none;
}

方案2：通过类控制过渡状态 #

默认不给元素设置过渡，而是用一个单独的类来启用过渡，页面加载完成后再添加这个类：

main {
  background: green;
  transform: translateX(-100%);
}

/* 仅当元素拥有transition类时启用过渡 */
main.transition {
  transition: transform 0.5s ease-in-out;
}

main.open {
  transform: none;
}

对应的JavaScript：

window.addEventListener('load', () => {
  // 页面加载完成后添加过渡类
  document.querySelector('main').classList.add('transition');
});

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('main').classList.toggle('open')
})

核心原理 #

两种方案的本质都是让浏览器先完成初始位置的渲染（元素处于translateX(-100%)状态），再启用过渡属性。这样就能避免Safari把初始渲染过程误判为需要触发过渡的状态变化。

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