React - 使用 Internet Explorer 在侧面显示白屏

Question

The app is working perfectly on every browser except for Internet Explorer 11. IE Display

Look how there's a white screen that appears on the side of the map and it moves the buttons on the footer.

This is how it should display: Mozilla Right Displaying

Why is this happening? This only happens in IE. Is there an issue with the flexboxs on IE?

Here is part of the code

 const NoAuthFooter = props => { const classes = useStyles(); const { classes: propClasses = {} } = props; return ( <Toolbar className={clsx(classes.footbar, propClasses.root)}> <div className={classes.company}> <Typography variant="h6"> Hecho con <SvgHeartBlockyEmpty width="16" height="16" /> &nbsp;por Innovación </Typography> </div> <div className={classes.actions}> <div className={clsx(classes.buttonContainer, classes.rowContainer)}> <LinkButton title="Más cerca de ti" to="/closer" /> </div> <div className={classes.buttonContainer}> <LinkButton id="WebFooter_a_terms" title="Términos" to={{ pathname: ROUTE_NAMES.information, aboutProps: { subject: MENU.terms } }} /> </div> <div className={classes.buttonContainer}> <LinkButton id="WebFooter_a_help" title="Ayuda" to={{ pathname: ROUTE_NAMES.information, aboutProps: { subject: MENU.help } }} /> </div> </div> </Toolbar> ); }; const useStyles = makeStyles(theme => ({ footbar: { position: 'relative', display: 'flex', width: '100%', bottom: 0, boxShadow: '0px 2px 10px -1px rgba(0,0,0,0.2)', backgroundColor: '#FFFFFF' }, company: { flex: 1, color: theme.palette.color.default, '@media (max-width:600px)': { display: 'none' }, [theme.breakpoints.up('lg')]: { flex: 2 } }, companyText: { display: 'inline', fontSize: 12 }, actions: { flex: 1, display: 'flex', justifyContent: 'flex-end', '@media (max-width:600px)': { flex: 1, justifyContent: 'space-around' } }, buttonContainer: { flex: 1, justifyContent: 'center', // * Responsive [theme.breakpoints.up('sm')]: { maxWidth: 160 } }, rowContainer: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', flex: 2 }, mobileHide: { display: 'none', [theme.breakpoints.up('md')]: { display: 'block' } } }));

Thanks for the help.

Answer 1

IE browser has below compatibility issues with flexbox.

1. IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation

2. In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

3. IE 11 does not vertically align items correctly when min-height is used

4. In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

Reference:

CSS Flexbox

I suggest you refer to the link below that may help to fix the issue.

Fixing Flexbox positioning for IE10 & IE11

If the issue persists then I suggest you post the sample code using only HTML and CSS. We will try to check and test it and try to provide suggestions for it.