-
Notifications
You must be signed in to change notification settings - Fork 46.4k
-
Notifications
You must be signed in to change notification settings - Fork 46.4k
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
False positive warning about style mismatch when hydrating server markup in IE11 #11807
Comments
Can you share a complete example I could quickly run? |
I have something similar in Safari:
When I copy strings in the warning in python and run:
It returns |
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. |
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. |
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. |
No problem—in general, I always suggest trying latest versions of React since we fixed quite a few bugs since then. |
@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! |
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. |
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
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. |
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
@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). |
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
@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. |
I can check Safari tomorrow :) |
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. It adds spaces and sorts the properties in some non-alphabetical order. Handling that would require sorting CSS properties in the client & server versions or applying `expectedStyle` to a temporary DOM node to read its `style` attribute normalized. Since it only affects IE, we're skipping style warnings in that browser completely in favor of doing all that work. Fixes facebook#11807
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. It adds spaces and sorts the properties in some non-alphabetical order. Handling that would require sorting CSS properties in the client & server versions or applying `expectedStyle` to a temporary DOM node to read its `style` attribute normalized. Since it only affects IE, we're skipping style warnings in that browser completely in favor of doing all that work. Fixes facebook#11807
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. It adds spaces and sorts the properties in some non-alphabetical order. Handling that would require sorting CSS properties in the client & server versions or applying `expectedStyle` to a temporary DOM node to read its `style` attribute normalized. Since it only affects IE, we're skipping style warnings in that browser completely in favor of doing all that work. Fixes facebook#11807
…ismatch IE 11 parses & normalizes the style attribute as opposed to other browsers. The normalization added in this commit normalizes spacing which resolves most irrelevant style prop warnings, though a warning will still happen if the style attribute contains invalid CSS declarations. Fixes facebook#11807
…ismatch (#13534) IE 11 parses & normalizes the style attribute as opposed to other browsers. It adds spaces and sorts the properties in some non-alphabetical order. Handling that would require sorting CSS properties in the client & server versions or applying `expectedStyle` to a temporary DOM node to read its `style` attribute normalized. Since it only affects IE, we're skipping style warnings in that browser completely in favor of doing all that work. Fixes #11807
After discussions, the fix in #13534 was to just skip |
…ismatch (facebook#13534) IE 11 parses & normalizes the style attribute as opposed to other browsers. It adds spaces and sorts the properties in some non-alphabetical order. Handling that would require sorting CSS properties in the client & server versions or applying `expectedStyle` to a temporary DOM node to read its `style` attribute normalized. Since it only affects IE, we're skipping style warnings in that browser completely in favor of doing all that work. Fixes facebook#11807
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
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
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
The text was updated successfully, but these errors were encountered: