React: False positive warning about style mismatch when hydrating server markup in IE11

[djeeg]

Do you want to request a feature or report a bug?
Bug? (not a biggy - not sure if IE11 is support for development)

What is the current behavior?

IE11 seems to always throw a warning for hydration failures
eg

Warning: Prop style did not match. Server: "text-decoration: none;" Client: "text-decoration:none"

Note: there is a space between the colon and none from Server, Client has no space

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

Have a SSR rendered component, using inline styles

                       <a href="/page1" style={{ textDecoration: "none" }}>
                            <h1 className="splash-head">Go to Page1</h1>
                        </a>

Then hydrate it on IE11
ReactDOM.hydrate(component, document.getElementById("app"));

This doesnt occur in either Chrome or Firefox

What is the expected behavior?

No warning

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React: 16.1.1
Browser: IE11

[gaearon]

Can you share a complete example I could quickly run?

[djeeg]

Here you go https://github.com/djeeg/demo-ie11hydrate

[sassanh]

I have something similar in Safari:

Warning: Prop `style` did not match. Server: "position:fixed;top:0;left:0;right:0;height:100%;background-color:rgba(0, 0, 0, 0);z-index:10000;overflow:hidden;transition:opacity 200ms;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;color:#6200ee" Client: "position:fixed;top:0;left:0;right:0;height:100%;overflow:hidden;pointer-events:none;background-color:rgba(0, 0, 0, 0);opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity 200ms;color:#6200ee;z-index:10000"

When I copy strings in the warning in python and run:

sorted('position:fixed;top:0;left:0;right:0;height:100%;overflow:hidden;pointer-events:none;background-color:rgba(0, 0, 0, 0);opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity 200ms;color:#6200ee;z-index:10000'.split(';')) == sorted("position:fixed;top:0;left:0;right:0;height:100%;background-color:rgba(0, 0, 0, 0);z-index:10000;overflow:hidden;transition:opacity 200ms;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;color:#6200ee".split(';'))

It returns True.

[Richacinas]

Hi there.. Any update on this?

It means that pretty much, React is broken for IE11. We have some inline styles too and there is no way to make it work.

Same problem.

[gaearon]

What do you mean by "broken"? This bug report is about a false positive warning. It doesn't prevent your code from running correctly.

It would be nice to fix the warning but since most people don't develop in IE11, it's pretty low priority. You're welcome to send a fix.

If it's affecting correctness then please file another bug with a description.

[Richacinas]

I ended up updating React to the latest version, and it seems that there was something else indeed breaking the app in IE11. It had to do with a dangerouslySetInnerHTML in some of our html tags, and I read somewhere else that it was fixed on the latest versions of React.

I was using 16.1.0, I believe.

Sorry about that.

[gaearon]

No problem—in general, I always suggest trying latest versions of React since we fixed quite a few bugs since then.

[alex-saunders]

@gaearon Is this an issue that would be possible for a beginner? I've noticed that the 'good first issue' label has been added but so has 'Difficulty: medium'.

I'd love to get involved with React and this looks like a great way in but just want to be sure it's not something that would be too tricky as a first contribution!

[gaearon]

You'd need access to IE11 to reproduce this. I wouldn't expect the bug itself to be complicated but debugging IE11 can be a pain.

[mgol]

There have been no comments here for the past 23 days so I took the liberty of taking a stab at it. I hope it's OK! PR: #13534.

[mgol]

@sassanh I couldn't reproduce the Safari fail locally so I just fixed the spacing issues that affect IE. Could you prepare a test case that affects Safari? If I have a way to confirm the Safari false warning I can fix that as well in my PR (or in another one).

[sassanh]

@mgol unfortunately I migrated to Ubuntu and can't test it on Safari anymore. I guess we can assume it's solved. In few months I'm going back to macOS then i'll check it (no reminder required, it's in one of my projects that I have to regularly run on my system.) and if I see the problem exists I'll create another issue and mention it here tagging you so that we can take care of it. thanks for solving the ie issue and following up the Safari issue with me.

[nhunzaker]

I can check Safari tomorrow :)

[mgol]

After discussions, the fix in #13534 was to just skip style validation in IE as it normalizes the string too much and making it warn when it really should could be complex and incur a performance hit. It's easy to skip it in IE by checking document.documentMode; doing the same in Safari may require checking userAgent which is more error-prone.