Skip to content

Commit

Permalink
Fix bug where styles have their media queries removed on IE
Browse files Browse the repository at this point in the history
In IE 9, appending two styles with media queries to a `StyleSheet`'s
`cssText` property results in the first style's media query being
removed and that first style will always apply without the query.

For example:

```
var styleTag = document.createElement('style');
document.body.appendChild(styleTag);
styleTag.styleSheet.cssText +=
  '@media (min-width: 500px) { body { background-color: blue; } }';
styleTag.styleSheet.cssText +=
  '@media (min-width: 700px) { body { background-color: red; } }';
```

Causes the body element to be red for window widths ≥ 700px, but it is
blue otherwise, even at widths < 500px.

This change uses the `innerText` property of the `styleTag` element
instead, which avoids this issue.
  • Loading branch information
reklawnos authored and Walker Henderson committed May 5, 2017
1 parent 1082d9a commit 6fb6555
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/inject.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const injectStyleTag = (cssContents /* : string */) => {

if (styleTag.styleSheet) {
// $FlowFixMe: legacy Internet Explorer compatibility
styleTag.styleSheet.cssText += cssContents;
styleTag.innerText += cssContents;
} else {
styleTag.appendChild(document.createTextNode(cssContents));
}
Expand Down
6 changes: 3 additions & 3 deletions tests/inject_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ describe('injection', () => {
});

// browser-specific tests
it('adds to the .styleSheet.cssText if available', done => {
it('adds to the styleTag via innerText if styleSheet is available', done => {
const styleTag = global.document.createElement("style");
styleTag.setAttribute("data-aphrodite", "");
document.head.appendChild(styleTag);
Expand All @@ -111,8 +111,8 @@ describe('injection', () => {
injectStyleOnce("x", ".x", [{ color: "red" }], false);

asap(() => {
assert.include(styleTag.styleSheet.cssText, ".x{");
assert.include(styleTag.styleSheet.cssText, "color:red");
assert.include(styleTag.innerText, ".x{");
assert.include(styleTag.innerText, "color:red");
done();
});
});
Expand Down

0 comments on commit 6fb6555

Please sign in to comment.