Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suspense/lazy not working as expected in IE11 (display: none not being removed) #14114

Closed
jaruesink opened this issue Nov 5, 2018 · 14 comments
Closed

Comments

@jaruesink
Copy link

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Suspense adds display: none to all top level child elements in IE11.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/w0573w2owk
Code sandbox can't render in IE11 either, but in this example I would expect to not see IE11 because the div would have display: none on it.

What is the expected behavior?
To be visible and not have display: none on the children.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
I had to revert back to react-loadable to fix this.

@gaearon
Copy link
Collaborator

gaearon commented Nov 5, 2018

Is it IE11 specific or a general bug? There’s a few general bugs we’re tracking right now.

@jaruesink
Copy link
Author

jaruesink commented Nov 5, 2018

IE specific, it worked on Chrome/Safari, but in IE11 the display: none; was left on all the child components. I was able to go and check that style off in the inspector and see the components were loaded just fine.

@sophiebits
Copy link
Collaborator

sophiebits commented Nov 6, 2018

If I take your CodeSandbox, add react-app-polyfill/ie9 and edit the package.json to compile for IE11 support: https://codesandbox.io/s/5wnv4nj6mk – then download that, build it locally, and deploy to now.sh at https://build-aoelkthmva.now.sh/, then I get a page that successfully displays "hello world" when opened in IE11.

screenshot

@sophiebits
Copy link
Collaborator

@jaruesink Can you confirm if I'm doing anything different from what you tested?

@jaruesink
Copy link
Author

Hmm I was hoping it would be as simple as that. But I guess it is more complicated. I'm using it with the router for lazyloading router components.

Here is my file that was working everywhere except for IE.

//@flow

// Vendors
import React, { Component, Suspense } from 'react';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router';
import { ConnectedRouter as Router } from 'connected-react-router';
import classnames from 'classnames';

import { history } from '../store';

// Layouts
import { LayoutAuth, LayoutPublic } from './';

// Styles
import './page-layout.scss';

// Components
import { Loading } from '../components';

// Types
type Props = {
  isAuthenticated: boolean
};

class LayoutGlobal extends Component<Props> {
  render() {
    const { isAuthenticated } = this.props;

    return (
      <Router history={history}>
        <div
          className={classnames('layout-global', {
            'layout-global-public': !isAuthenticated,
            'layout-global-auth': isAuthenticated
          })}
        >
          <Suspense fallback={<Loading />}>
            <Switch>
              <Route exact path="/" component={LayoutAuth} />
              <Route path="/account" component={LayoutAuth} />
              <Route exact path="/sign-in" component={LayoutPublic} />
              <Route path="/create-account" component={LayoutPublic} />
              <Route path="/forgot-password" component={LayoutPublic} />
              <Route component={false ? LayoutAuth : LayoutPublic} />
            </Switch>
          </Suspense>
        </div>
      </Router>
    );
  }
}

const mapStateToProps = ({ auth: { isAuthenticated } }): Object => ({ isAuthenticated });

export default connect(mapStateToProps)(LayoutGlobal);

@sophiebits
Copy link
Collaborator

Oh, I think I found the bug.

sophiebits added a commit to sophiebits/react that referenced this issue Nov 6, 2018
Setting to null isn't correct; setting to '' is. I opted to use dangerousStyleValue for consistency with the main path that we set things.

Fixes facebook#14114.

Test Plan:
Verified setting to '' works in Chrome and IE11. (Setting to null works in Chrome but not in IE11.)
sophiebits added a commit that referenced this issue Nov 6, 2018
Setting to null isn't correct; setting to '' is. I opted to use dangerousStyleValue for consistency with the main path that we set things.

Fixes #14114.

Test Plan:
Verified setting to '' works in Chrome and IE11. (Setting to null works in Chrome but not in IE11.)
@rodoabad
Copy link

rodoabad commented Jan 8, 2019

I love GitHub issues/prs. I can easily track the problem, what caused it, and how to fix it! I was looking for a fix and @sophiebits had one! Thank you!

jetoneza pushed a commit to jetoneza/react that referenced this issue Jan 23, 2019
Setting to null isn't correct; setting to '' is. I opted to use dangerousStyleValue for consistency with the main path that we set things.

Fixes facebook#14114.

Test Plan:
Verified setting to '' works in Chrome and IE11. (Setting to null works in Chrome but not in IE11.)
n8schloss pushed a commit to n8schloss/react that referenced this issue Jan 31, 2019
Setting to null isn't correct; setting to '' is. I opted to use dangerousStyleValue for consistency with the main path that we set things.

Fixes facebook#14114.

Test Plan:
Verified setting to '' works in Chrome and IE11. (Setting to null works in Chrome but not in IE11.)
@stephen-algeo
Copy link

@gaearon any ideas when this fix might make it into a release?

@stephen-algeo
Copy link

PS: We love the work you do for us all!

@spoeck
Copy link

spoeck commented Mar 7, 2019

Any updates to this?

@patsta32
Copy link

patsta32 commented Mar 7, 2019

@spoeck can be fixed with polyfills. It´s described in this pull request
#14583

@stephen-algeo
Copy link

Thanks everyone for this.

@gaearon
Copy link
Collaborator

gaearon commented Mar 12, 2019

The issue itself has been fixed (I think in 16.7).

@AbGrS
Copy link

AbGrS commented Oct 19, 2020

I'm noticing this problem with react version "^16.12.0", Suspense/fallback adds a style display: none !important and this doesn't get removed on IE 11. Works fine on Chrome though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants