Safari 14.1.2版本浏览器无法显示React语言选择器问题求助

云原生阿岚

2026-10-3

问题排查与解决方案

1. 修复Flex布局无效属性

你代码里的 ContainerSignInStyled 用了Flex布局，却写了Grid布局才支持的 justify-items: stretch 属性：

export const ContainerSignInStyled = styled(Container)`
    display: flex;
    flex-direction: column;
    justify-items: stretch; /* 这行是Grid属性，Flex布局下无效 */
    min-height: 100vh;
    justify-content: space-between;
    align-items: center;
`;

Chrome对无效CSS属性容错性高会直接忽略，但部分版本Safari会因为识别到Flex上下文下的非法属性，导致整个布局规则解析异常，直接删除 justify-items: stretch 这行即可。

2. 补全SVG图标显式样式

你用的PlFlag、GbFlag大概率是SVG组件，Safari对继承宽高的SVG元素处理和Chrome存在差异，经常会出现0宽高的情况，给包裹后的国旗组件补充显式宽高：

export const StyledPlFlag = styled(PlFlag)`
    border-radius: 50%;
    width: 4rem; /* 可按需调整尺寸 */
    height: 4rem;
    display: block;
`;
export const StyledGbFlag = styled(GbFlag)`
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: block;
`;

3. 兼容vh单位适配问题

旧版Safari计算100vh时会包含系统地址栏、工具栏的高度，容易导致容器实际高度不足，顶部的语言选择器被挤出可视区域，给容器补充Safari专属高度兼容：

export const ContainerSignInStyled = styled(Container)`
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 新增Safari兼容 */
    min-height: -webkit-fill-available;
    justify-content: space-between;
    align-items: center;
`;

4. 修复层级遮挡问题

你代码里的StyledPaper设置了z-index:2，但语言选择器所在的LangHeader没有设置定位和层级，Safari对非定位元素的层级处理和Chrome存在差异，可能导致语言选择器被表单卡片挡住，补充样式：

export const LangHeader = styled.nav`
    display: flex;
    align-self: flex-end;
    margin-top: 2rem;
    margin-bottom: 2rem;
    /* 新增层级配置 */
    position: relative;
    z-index: 3;
`;

5. 兼容低版本Safari的:focus-visible伪类

Safari 15.4版本才原生支持:focus-visible伪类，更低版本的Safari遇到该伪类可能会导致整段样式规则解析失败，你可以先注释掉StyledFlagButton里的:focus-visible相关规则测试是否恢复显示，如需保留该交互可以引入对应的polyfill做兼容。

快速调试方法

打开Safari开发者工具的元素面板，查看语言选择器的DOM节点是否存在：

如果DOM存在，查看计算样式里的display、width、height、offsetTop等属性，确认是元素宽高为0还是位置偏移出可视区
如果DOM不存在，再排查是否有React渲染逻辑的兼容问题

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