Safari 在表单提交时会提前终止 JavaScript 执行，导致加载动画和实时计时器无法正常运行；而 Chrome 兼容性更好，故表现正常。根本解法是避免依赖 onclick，改用 submit 事件监听并阻止默认跳转行为（如需异步上传），或确保 DOM 更新在重定向前完成。
safari 在表单提交时会提前终止 javascript 执行，导致加载动画和实时计时器无法正常运行；而 chrome 兼容性更好，故表现正常。根本解法是避免依赖 `onclick`，改用 `submit` 事件监听并阻止默认跳转行为（如需异步上传），或确保 dom 更新在重定向前完成。
在 Web 表单上传场景中，一个常见却易被忽视的兼容性问题是：Chrome 下流畅运行的加载动画与实时计时器，在 Safari 中完全静止或不更新。这并非 Safari “不支持动画”或 “禁用定时器”，而是其对表单 <form method="post" action="/upload"></form> 的原生提交机制更为严格——一旦 submit 触发，浏览器会立即开始导航流程，中断后续 JS 执行（包括 setInterval 回调和 CSS 动画触发），导致 .spin-animation 类虽被添加，但 display: flex 可能未及时生效，计时器也因上下文销毁而停止。
✅ 正确做法：监听 submit 事件，而非 onclick
将逻辑从按钮的 onclick="load()" 迁移至表单的 submit 事件，并确保 DOM 更新同步完成：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
<form id="uploadForm" method="post" enctype="multipart/form-data" action="/upload">
<div class="file-upload">
<label for="upload">Upload</label>
<input type="file" name="pdf-file" id="upload">
</div>
<div class="load"></div>
<h1 class="text-timer" id="timer">0.00 seconds</h1>
<button type="submit">Submit</button>
</form>document.getElementById('uploadForm').addEventListener('submit', function(e) {
// 阻止默认提交（仅当使用 fetch/AJAX 时启用）
// e.preventDefault();
const loadingIcon = document.querySelector('.load');
const timerEl = document.getElementById('timer');
// 确保显示并启动动画
loadingIcon.style.display = 'flex';
loadingIcon.classList.add('spin-animation');
// 启动高精度计时器（注意：10ms 间隔在 Safari 中仍可靠）
let time = 0;
const interval = setInterval(() => {
time += 0.01;
timerEl.textContent = time.toFixed(2) + ' seconds';
}, 10);
// ⚠️ 关键：若采用原生表单提交（即不阻止默认行为），
// 请确保所有 UI 更新在 setInterval 启动后「立即」完成；
// Safari 对 submit 后的 JS 执行窗口极短，延迟操作（如 setTimeout）易失效。
});? 动画兼容性补全（CSS）
Safari 需显式声明 -webkit- 前缀以保障旧版本兼容性，同时确保初始状态可被正确覆盖：
.load {
border-radius: 50%;
border: 0.25rem solid #D3D3D3;
border-top-color: #000;
width: 80px;
height: 80px;
display: none; /* 初始隐藏 */
}
.spin-animation {
display: flex;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}? 注意事项与进阶建议
-
不要依赖
onclick处理表单提交逻辑：click在submit之前触发，但 Safari 可能在submit开始后丢弃后续 JS 任务。 -
若需真正可控的上传流程，请改用
fetch+FormData：
阻止默认提交（e.preventDefault()），手动发送请求，并在await fetch()后处理重定向（如window.location.href = '/upload'），从而完全掌控生命周期。 -
避免
innerText在 Safari 中的渲染延迟：优先使用textContent（已体现在示例中），它更符合标准且性能更稳定。 -
计时器精度提示：
setInterval(10)并非精确 10ms，尤其在页面后台或高负载时；如需高精度，可结合performance.now()计算差值。
通过以上调整，动画与计时器将在 Chrome、Safari（macOS/iOS）、Edge 等主流浏览器中保持一致行为——既符合语义化表单规范，又兼顾了跨浏览器执行时序的差异性。
