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.