语言选择不显示在 Safari 版本 14.1.2 浏览器上

Question

在应用程序中，我按应有的方式处理每个浏览器语言选择器 shpws。在屏幕顶部，可以选择应用程序的语言。

但是在 Safari 上测试后它不显示

您知道如何解决吗？想不通，没遇到过这样的事情

这是它的构建方式：

import React, { FC } from 'react';

import {
    ContainerSignInStyled,
    WrapperSignInStyled,
    LangHeader,
    StyledFlagButton,
    Footer,
    StyledPlFlag,
    StyledGbFlag,
    StyledPaper,
} from './styles';

import { LanguageEnum } from '@nevomo/utilities';

interface IProps {
    changeLanguage: (lang: LanguageEnum) => void;
    currentPath?: string;
}

export const ViewContainer: FC<IProps> = ({ changeLanguage, children }) => {
    return (
        <WrapperSignInStyled>
            <ContainerSignInStyled>
                <LangHeader>
                    <StyledFlagButton
                        onClick={() => changeLanguage(LanguageEnum.polish)}
                    >
                        <StyledPlFlag />
                    </StyledFlagButton>
                    <StyledFlagButton
                        onClick={() => changeLanguage(LanguageEnum.english)}
                    >
                        <StyledGbFlag />
                    </StyledFlagButton>
                </LangHeader>
                <StyledPaper>{children}</StyledPaper>
                <Footer>Footer Nevomo 2021</Footer>
            </ContainerSignInStyled>
        </WrapperSignInStyled>
    );
};

import { Container } from '@material-ui/core';
import styled from 'styled-components';
import { PlFlag, GbFlag } from '@nevomo/shared';
import { Paper } from '@material-ui/core';

export const WrapperSignInStyled = styled.div`
    background: url('/assets/Login_bckg.jpg');
    background-size: cover;
`;
export const ContainerSignInStyled = styled(Container)`
    display: flex;
    flex-direction: column;
    justify-items: stretch;
    min-height: 100vh;
    justify-content: space-between;
    align-items: center;
`;

export const LangHeader = styled.nav`
    display: flex;
    align-self: flex-end;
    margin-top: 2rem;
    margin-bottom: 2rem;
`;

export const StyledFlagButton = styled.button`
    outline: none;
    width: 4.4rem;
    border: 0.2rem solid transparent;
    margin-left: 1rem;
    position: relative;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    &:focus-visible {
        outline: 0;
        border: 0.2rem solid black;
        box-sizing: border-box;
    }
`;

export const Footer = styled.footer`
    margin-top: 2rem;
    margin-bottom: 2rem;
`;

export const StyledPlFlag = styled(PlFlag)`
    border-radius: 50%;
`;
export const StyledGbFlag = styled(GbFlag)`
    border-radius: 50%;
`;
export const StyledPaper = styled(Paper)`
    ${(props) => props.theme.breakpoints.up('xs')} {
        padding: 3rem;
        width: 38.8rem;
    }
    width: 100%;
    padding: 2rem;
    -webkit-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.35);
    z-index: 2;
`;

Answer 1

问题可能出在 flexbox 的管理上，我记得前一段时间有兼容性问题。

您打算支持什么最低版本的 Safari？

如果您的目标年龄小于 9，请务必在某些属性和属性值之前指定 供应商前缀，即：

.foo {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

您可以使用这些链接作为参考来检查支持、了解错误和解决方法以使 flexbox cross-browser 兼容：

https://caniuse.com/flexbox
https://github.com/philipwalton/flexbugs（对 Safari >= 9 也有效）

无论如何，请使用 safari devtools 检查元素的尺寸和位置是否正确，从 parents 到 children。如果您有 flexbox 问题，按此顺序进行会有所帮助。

语言选择不显示在 Safari 版本 14.1.2 浏览器上

Language picking don't display on Safari Version 14.1.2 browser

safari

reactjs

material-ui

styled-components