React - White screen displaying on the side with 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.

Might be browser compatibility issues, try including the react polyfill for ie https://stackoverflow.com/questions/53631949/why-ie-11-display-blank-page-rendering-react-app — Shawn Yap, Jan 24 '20 at 22:06
When asking a question, people will be better able to provide help if you provide code that they can easily understand and use to reproduce the problem. This is referred to by community members as creating a minimal, complete and verifiable example. See https://stackoverflow.com/help/minimal-reproducible-example — Tyler Miller, Jan 24 '20 at 22:56
Should be something related to CSS. Please provide code for the component. — Manoj Bharadwaj, Jan 24 '20 at 23:02

score 1 · Accepted Answer · answered Jan 27 '20 at 06:01

IE browser has below compatibility issues with flexbox.

IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation
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.
IE 11 does not vertically align items correctly when min-height is used
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.

React - White screen displaying on the side with Internet Explorer

1 Answers1