React 18/Vite站点在Safari 5.1显示空白页，移动端正常求助

一、确实存在移动端Safari正常但桌面旧版本异常的情况 #

Safari 5.1是2011年发布的古董级浏览器，和现代移动端Safari（即使是较旧的移动端版本）在JS/CSS支持上差异极大：

• JS兼容性缺口：React 18和Vite默认打包的代码依赖ES6+特性（如Symbol、Promise.prototype.finally、Object.assign的完整实现），而Safari 5.1完全不支持这些特性。Vite的自动polyfill逻辑默认只针对支持ES模块的浏览器，而Safari 5.1不支持ES模块，所以不会自动注入所需polyfill。
• CSS渲染问题：Safari 5.1对现代CSS属性支持极差，比如flexbox仅支持旧的-webkit-box语法、不支持CSS变量、部分选择器解析异常，即使JS无报错，也会因CSS渲染失败导致页面空白。

解决步骤 #

1. 配置Vite兼容旧浏览器
   安装@vitejs/plugin-legacy插件及必要的polyfill依赖：

   npm install @vitejs/plugin-legacy core-js regenerator-runtime --save-dev
   

   修改vite.config.js，指定目标浏览器并开启legacy支持：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import legacy from '@vitejs/plugin-legacy';
   
   export default defineConfig({
     plugins: [
       react(),
       legacy({
         targets: ['safari >= 5.1'],
         additionalLegacyPolyfills: ['core-js/stable', 'regenerator-runtime/runtime']
       })
     ]
   });
   

2. 排查CSS兼容性
   • 将display: flex替换为兼容写法：

     .container {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
     }
     

   • 移除或替换CSS变量，改用静态值；检查是否使用了Safari 5.1不支持的选择器（如:nth-child()的复杂用法）。

二、BrowserStack环境的可能性验证 #

BrowserStack的旧版本浏览器镜像可能存在环境异常，可以通过以下方式验证：

• 上传一个极简静态HTML页面（仅含<div>测试内容</div>）到BrowserStack的Safari 5.1环境，若仍显示空白，说明是BrowserStack的镜像问题，可尝试切换其他区域的镜像或联系其技术支持。
• 若极简页面正常显示，再逐步添加你的项目代码，定位是JS还是CSS导致的空白。
• 检查BrowserStack的Network面板，确认所有资源（JS、CSS、图片）都已成功加载，旧浏览器可能无法加载HTTPS的某些证书或现代CDN资源。

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