Safari 14.1.2 版浏览器不显示语言选择答案

【问题标题】：Language picking don't display on Safari Version 14.1.2 browserSafari 14.1.2 版浏览器不显示语言选择
【发布时间】：2021-11-18 15:19:09
【问题描述】：

在应用程序中，我按照应有的方式处理每个浏览器语言选择器 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;
`;

【问题讨论】：

如果可以的话，添加生成页面的小提琴（HTML + CSS），以便更容易重现。

标签： reactjs safari material-ui styled-components

【解决方案1】：

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

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

如果您的目标是供应商前缀，即：

.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 跨浏览器兼容：

https://caniuse.com/flexbox
https://github.com/philipwalton/flexbugs（也适用于 Safari >= 9）

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

【讨论】：