Angular.js causes styled-components to break on IE 11 #657

dfrankland · 2017-04-06T10:38:17Z

Version

1.4.4 (maybe a lot older too)

Reproduction

Webpackbin doesn't work on IE 11... So here's a repo!
https://github.com/dfrankland/styled-components-angular-ie-11-conflict

Steps to reproduce

Follow steps in linked repo.

Expected Behavior

Work like normal.

Actual Behavior

No CSS rules are applied to the style element.

Why?

Angular will recompile all the individual DOM elements including those in the head. Normally, on Chrome and other browsers this isn't an issue, but on IE 11 this causes text nodes to lose their parentNode. This could occur due to anything though, it doesn't have to be Angular. The more longwinded explanation:

Style elements and text nodes get inserted in ComponentStyle
Afterwards, anything could mutate the DOM, such as Angular, causing issues later
A styled component is ready to render so generateAndInjectStyles inside of ComponentStyle is called
appendRule inside the Glamor sheet tries to mutate a text node, but it has already been removed from the DOM, thus no styles are applied to the style tags created in step 1

Fix

I propose to move the appending of text nodes to the style element DOM only once the component is ready to render, rather than doing it preemptively.

https://github.com/styled-components/styled-components/blob/master/src/vendor/glamor/sheet.js#L125

const textNode = document.createTextNode(rule)
- last(this.tags).appendChild(textNode)
- insertedRule = { textNode, appendRule: newCss => textNode.appendData(newCss)}
+ insertedRule = {
+   textNode,
+   appendRule: newCss => textNode.appendData(newCss),
+   appendNode: () => last(this.tags).appendChild(textNode),
+ };

https://github.com/styled-components/styled-components/blob/master/src/models/ComponentStyle.js#L39

const selector = nameGenerator(hash)
inserted[hash] = selector
const root = parse(`.${selector} { ${flatCSS} }`)
postcssNested(root)
autoprefix(root)
this.insertedRule.appendRule(root.toResult().css)
+ this.insertedRule.appendNode()

The text was updated successfully, but these errors were encountered:

garretruh · 2017-04-06T13:41:36Z

Seeing the same issue with styled-components@1.3.0. Any components on a page with Angular (v1.6.4 in this case) that are rendered after Angular has initialized don't get their styles injected. The included patch does appear to resolve the issue.

kitten · 2017-04-06T18:11:31Z

We don't want to modify the vendored glamor module, however we can still defer the injection of the stylesheet. It's fairly simple, but is that stuff we want, @mxstbr @geelen?

mxstbr · 2017-04-07T16:47:40Z

This is @geelen expertise, there's a reason why we do it exactly the way we do.

I don't want to change that part of the code without having benchmarked it extensively to make sure we don't get less performant and I need @geelen to confirm this'll work so we avoid subtle ordering bugs like #1. (which are a pain)

kitten · 2017-04-08T00:28:43Z

@mxstbr Ah, yep, you're right. If we defer injection to the rendering, then the order of CSS is going to change to the order of rendering, not the order of imports. Looks like this is not sth we'll fix anytime soon :/

dfrankland · 2017-04-08T01:00:31Z

@mxstbr @philpl this is definitely true. Maybe the best option in the meantime is just to do a check for if the textNode has lost its parentNode and throw warnings 🤔

For example:

const selector = nameGenerator(hash)
inserted[hash] = selector
const root = parse(`.${selector} { ${flatCSS} }`)
postcssNested(root)
autoprefix(root)
+ if (this.textNode && !this.textNode.parentNode) {
+   console.warn('There may be an issue with the styles, the stylesheet DOM has been mutated.')
+ }
this.insertedRule.appendRule(root.toResult().css)

kitten · 2017-05-22T03:34:18Z

It's not really sth that is a bug on our end, or sth that we can affect or fix unfortunately

jasonalmaturner · 2017-08-03T18:01:58Z

I've had this same problem with using styled-components in the angular/react app I'm working on. I found this snippet by @dfrankland that fixed my problem.

angular.element(document).ready(() => {
  const bootStrapElement = (
    // BAD! Recompiles everything causing IE 11 to not work
    document

    // GOOD! Does not mess with the <head>
    // document.body
  );
  angular.bootstrap(bootStrapElement, ['blah'], {});
});

https://github.com/dfrankland/styled-components-angular-ie-11-conflict/blob/master/src/main.js

HashemKhalifa · 2017-08-28T14:27:31Z

@jasonalmaturner Would u tell me what u changed?!

mxstbr · 2017-08-28T14:35:34Z

- angular.bootstrap(document, ['blah'], {});
+ angular.bootstrap(document.body, ['blah'], {});

HashemKhalifa · 2017-08-28T15:37:57Z

actually, I'm trying to fix my issue using this solution but I'm using react2angular to handle react components separately what I have to follow?!

dfrankland · 2017-08-28T17:48:27Z

@HashemKhalifa, using react2angular doesn't really affect the way the fix is implemented.

Following the react2angular example, you only need to add one line:

import { react2angular } from 'react2angular'

angular
  .module('myModule', [])
  .component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']))
+ .element(document).ready(() => angular.bootstrap(document.body, ['myModule'], {}));

If you need any other help, you may want to open an issue for react2angular.

HashemKhalifa · 2017-08-28T19:45:18Z

@dfrankland Thanks for your reply, .element here refer to what?
this is my example but it didn't work.
.component('hotelSearchMapComponent', react2angular(hotelSearchMapComponent, ['lat', 'lng', 'zoom', 'hotels', 'symbol', 'rate', 'from', 'to', 'onSelectHotel'])) .element(document).ready(() => angular.bootstrap(document.body, [MODULE_NAME], {}))

HashemKhalifa · 2017-08-29T08:02:13Z

getting these errors

kitten · 2017-08-29T10:52:21Z

I think at this point you should consider opening an issue on their repo instead 😉

adamchenwei · 2017-08-31T20:19:00Z

Hey everyone, someone even opened a repo to demostrate the bug, that when styled-component run with AngularJS in IE11, it breaks.
https://github.com/dfrankland/styled-components-angular-ie-11-conflict

Any fixes atm? really need it, super sad it happens...

kitten · 2017-08-31T21:59:31Z

@adamchenwei To quote myself:

It's not really sth that is a bug on our end, or sth that we can affect or fix unfortunately

I don't really have time to look at it in detail, but the proposed fix confirmed it for me. If someone could explain why it happens and it turns out that it's a problem with our codebase, then we'd be able to actually fix it.

byrekt · 2017-09-18T17:25:47Z

Just a heads-up. If you use auto-bootstrapping with ng-app on the html tag of your index.html, you can try moving ng-app to the body tag. That resolved it for me.

k15a added the bug 🐛 label Apr 6, 2017

kitten closed this as completed May 22, 2017

kitten added help wanted 🆘 enhancement ✨ and removed bug 🐛 labels May 22, 2017

HashemKhalifa mentioned this issue Aug 29, 2017

Issue with IE11 with styled components coatue-oss/react2angular#34

Closed

sorenlouv mentioned this issue Nov 27, 2017

[Chrome] Use document.body instead of document as root element when bootstrapping Angular elastic/kibana#15158

Merged

frassinier mentioned this issue Apr 1, 2019

Internet Explorer 11 support elrumordelaluz/reactour#118

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular.js causes styled-components to break on IE 11 #657

Angular.js causes styled-components to break on IE 11 #657

dfrankland commented Apr 6, 2017 •

edited

garretruh commented Apr 6, 2017 •

edited

kitten commented Apr 6, 2017

mxstbr commented Apr 7, 2017

kitten commented Apr 8, 2017

dfrankland commented Apr 8, 2017 •

edited

kitten commented May 22, 2017

jasonalmaturner commented Aug 3, 2017

HashemKhalifa commented Aug 28, 2017

mxstbr commented Aug 28, 2017

HashemKhalifa commented Aug 28, 2017

dfrankland commented Aug 28, 2017 •

edited

HashemKhalifa commented Aug 28, 2017

HashemKhalifa commented Aug 29, 2017

kitten commented Aug 29, 2017

adamchenwei commented Aug 31, 2017 •

edited

kitten commented Aug 31, 2017

byrekt commented Sep 18, 2017

Angular.js causes styled-components to break on IE 11 #657

Angular.js causes styled-components to break on IE 11 #657

Comments

dfrankland commented Apr 6, 2017 • edited

Version

Reproduction

Steps to reproduce

Expected Behavior

Actual Behavior

Why?

Fix

garretruh commented Apr 6, 2017 • edited

kitten commented Apr 6, 2017

mxstbr commented Apr 7, 2017

kitten commented Apr 8, 2017

dfrankland commented Apr 8, 2017 • edited

kitten commented May 22, 2017

jasonalmaturner commented Aug 3, 2017

HashemKhalifa commented Aug 28, 2017

mxstbr commented Aug 28, 2017

HashemKhalifa commented Aug 28, 2017

dfrankland commented Aug 28, 2017 • edited

HashemKhalifa commented Aug 28, 2017

HashemKhalifa commented Aug 29, 2017

kitten commented Aug 29, 2017

adamchenwei commented Aug 31, 2017 • edited

kitten commented Aug 31, 2017

byrekt commented Sep 18, 2017

dfrankland commented Apr 6, 2017 •

edited

garretruh commented Apr 6, 2017 •

edited

dfrankland commented Apr 8, 2017 •

edited

dfrankland commented Aug 28, 2017 •

edited

adamchenwei commented Aug 31, 2017 •

edited