Language picking don't display on Safari Version 14.1.2 browser

Question

In the app I work on every browser language picker shpws as it should be. on the top of the screen it's rendering possibility to choose language of the app. [![enter image description here][1]][1]

but once it's tested on Safari it does not display

[![enter image description here][2]][2]

Do You have any idea how to fix it ? I cannot figure it out, didn't face something like that before

This is how it's build:

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

The problem could be in the management of the flexbox, I remember having compatibility issues a while ago.

What minimum version of safari do you intend to support?

If you are targeting < 9, be sure to specify vendor prefixes before some properties and properties values, i.e.:

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

you can use these links as a reference the check the support, know bugs and workaround to make flexbox cross-browser compatible:

• https://caniuse.com/flexbox
• https://github.com/philipwalton/flexbugs (which is also valid for Safari >= 9)

In any case, check with the safari devtools that the elements have the correct dimensions and positions, starting from the parents towards the children. If you have flexbox problems, going in this order can help.