Check document.documentMode once
Dan Abramov committed
Sep 4, 2018 at 14:25 UTC
d6b59e3d264198a42c205c3cebc0b561e0ca9bec
2 files changed
+16
-9
packages/react-dom/src/__tests__/ReactServerRenderingHydration.js
+4
@@ -283,6 +283,10 @@ describe('ReactDOMServerHydration', () => {
283
284
it('should not warn when the style property differs on whitespace or order in IE', () => {
285
document.documentMode = 11;
286
+ jest.resetModules();
287
+ React = require('react');
288
+ ReactDOM = require('react-dom');
289
+ ReactDOMServer = require('react-dom/server');
290
try {
291
const element = document.createElement('div');
292
packages/react-dom/src/client/ReactDOMComponent.js
+12
-9
@@ -67,6 +67,7 @@ let warnForTextDifference;
67
let warnForPropDifference;
68
let warnForExtraAttributes;
69
let warnForInvalidEventListener;
70
+let canDiffStyleForHydrationWarning;
71
72
let normalizeMarkupForTextOrAttribute;
73
let normalizeHTML;
@@ -94,6 +95,16 @@ if (__DEV__) {
95
validateUnknownProperties(type, props, /* canUseEventSystem */ true);
96
};
97
98
+ // IE 11 parses & normalizes the style attribute as opposed to other
99
+ // browsers. It adds spaces and sorts the properties in some
100
+ // non-alphabetical order. Handling that would require sorting CSS
101
+ // properties in the client & server versions or applying
102
+ // `expectedStyle` to a temporary DOM node to read its `style` attribute
103
+ // normalized. Since it only affects IE, we're skipping style warnings
104
+ // in that browser completely in favor of doing all that work.
105
+ // See https://github.com/facebook/react/issues/11807
106
+ canDiffStyleForHydrationWarning = !document.documentMode;
107
+
108
// HTML parsing normalizes CR and CRLF to LF.
109
// It also can turn \u0000 into \uFFFD inside attributes.
110
// https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
@@ -1000,15 +1011,7 @@ export function diffHydratedProperties(
1011
// $FlowFixMe - Should be inferred as not undefined.
1012
extraAttributeNames.delete(propKey);
1013
1003
- // IE 11 parses & normalizes the style attribute as opposed to other
1004
- // browsers. It adds spaces and sorts the properties in some
1005
- // non-alphabetical order. Handling that would require sorting CSS
1006
- // properties in the client & server versions or applying
1007
- // `expectedStyle` to a temporary DOM node to read its `style` attribute
1008
- // normalized. Since it only affects IE, we're skipping style warnings
1009
- // in that browser completely in favor of doing all that work.
1010
- // See https://github.com/facebook/react/issues/11807
1011
- if (!document.documentMode) {
1014
+ if (canDiffStyleForHydrationWarning) {
1015
const expectedStyle = CSSPropertyOperations.createDangerousStringForStyles(
1016
nextProp,
1017
);