Safari 在表单提交时会阻塞 JavaScript 执行，导致加载动画和实时计时器无法更新；通过监听 submit 事件、阻止默认跳转并手动触发上传，可确保动画与计时逻辑在所有浏览器中一致运行。
safari 在表单提交时会阻塞 javascript 执行，导致加载动画和实时计时器无法更新；通过监听 `submit` 事件、阻止默认跳转并手动触发上传，可确保动画与计时逻辑在所有浏览器中一致运行。
在 Web 开发中，一个常见却易被忽视的兼容性问题是：表单提交时的 JavaScript 行为在 Safari 和 Chrome 中表现不一致。典型现象是——加载动画（如旋转图标）和实时计时器在 Chrome 中流畅运行，但在 Safari 中完全“卡住”或根本不触发。根本原因在于：Safari 对 <form method="post" action="..."></form> 的原生提交流程执行更激进的页面卸载优化，会在 submit 触发后立即中断 JS 定时器（setInterval）和 CSS 动画渲染，而 Chrome 则允许短时间内的 JS 继续执行。
要可靠解决该问题，关键在于 避免依赖原生表单跳转的“中间状态”，改用显式控制流程：
✅ 正确做法：监听 submit 事件 + 阻止默认行为 + 手动处理
首先，为表单添加唯一 ID 并移除内联 onclick，改用事件委托：
<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>然后，在 JavaScript 中监听 submit，并显式调用 e.preventDefault() 来阻止立即跳转，从而保留 JS 执行上下文：
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault(); // ⚠️ 关键：阻止默认提交，保持续航能力
const loadingIcon = document.querySelector('.load');
const timerEl = document.getElementById('timer');
// 启用加载动画
loadingIcon.style.display = 'flex';
loadingIcon.classList.add('spin-animation');
// 启动计时器
let time = 0;
const interval = setInterval(() => {
time += 0.01;
timerEl.textContent = time.toFixed(2) + ' seconds';
}, 10);
// ✅ 模拟文件上传（实际应替换为 fetch / FormData）
setTimeout(() => {
clearInterval(interval); // 清理定时器
loadingIcon.classList.remove('spin-animation');
loadingIcon.style.display = 'none';
timerEl.textContent = 'Upload complete!';
// ✅ 手动提交表单（触发重定向）
this.submit();
}, 3000); // 示例：3秒后完成上传
});? CSS 动画兼容性补全（Safari 必备）
Safari 对 CSS 动画需显式声明 -webkit- 前缀，且元素必须满足“可动画化”条件（如 display: flex 或 block）：
.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中直接调用load()并依赖后续表单自动提交：Safari 会在点击后立即准备跳转，JS 几乎无执行窗口； -
setInterval在页面卸载前可能被强制终止：务必在跳转前clearInterval，避免内存泄漏； -
真实上传请用
fetch()+FormData：替代原生表单提交，实现完全可控的进度反馈（如XMLHttpRequest.upload.onprogress）； - 测试务必在真机 Safari（iOS/macOS）上进行：模拟器或 DevTools 的 User Agent 切换无法复现全部卸载行为。
通过将控制权从浏览器原生提交流程中“夺回”，你就能确保加载状态、计时逻辑和视觉反馈在 Chrome、Safari、Firefox 等所有现代浏览器中表现一致——这是构建健壮 Web 表单体验的关键一步。
