Interpolations in CJK and Cyrillic languages broken in IE11 #14924
Comments
|
I can reproduce this. A very similar quirk was fixed with #11796. Ooc, are you using MutationObservers? |
|
You don't happen to have a more minimal reproduction (or at least one with unminified sources), do you? 😛 |
|
I tried my best to reproduce this, but failed miserably. And I have been equally unsuccessful at debugging this directly on https://console.cloud.google.com in IE11. 😟 If someone is able to provide a more "debuggable" reproduction or has access to investigate on the dev environment of https://console.cloud.google.com, that would help a lot 😄 |
|
Hey Georgios, thanks for looking into this. I have also not had much luck with getting a minimal reproduction but I do have access to the dev environment. Do you have any ideas for places where I can start to debug? |
|
@jshoudy11 , I was finally able to reproduce it 🎉 It seems to be a combination of It is interesting that there is different behavior between 1.5.7 and the current master - probably as a result of our stopping to wrap transcluded text-content in spans (as of 7617c08). Just to be clear, the behavior is problematic on both versions, but different: 1.5.7 demo, snapshot demo (Now, all we need to find out is whether/how we can work around this 😄) |
|
Btw, the simplest work-around for application code, seems to be wrapping your transcluded text nodes in spans. E.g.: <!-- BEFORE: -->
<directive-with-transclusion>
My text content
</directive-with-transclusion>
<!-- AFTER: -->
<directive-with-transclusion>
<span>My text content</span>
</directive-with-transclusion> |
|
This is a wild guess on what the issue is (as I do not have access to IE). First IE by using MutationObservers splits the text into two nodes. This is common for 1.5 and 1.6. In 1.5 here In 1.6 here |
|
Thank you for the help @gkalpak and @lgalfaso. I actually do not believe we are using MutationObservers in the areas where this error is occurring. But I will try to wrap the interpolations in question in span tags and see if it works. I don't have access to IE today but I will tomorrow. I'll let you know if it works. |
|
@gkalpak your snapshot demo is broken in IE11 for me even without mutation observers. |
|
@Narretz , IE apparently has this "feature" that if you run it once with the MutationObserver, removing it and clicking the "Run" button doesn't fix the problem (it is as if it is running with the MutationObserver). You have to save it (e.g. fork the pen) without the MutationObserver. Only when reloading the whole page do changes in MutationObserver take effect (or something along these lines). |
|
Ah, okay, thanks for the explanation. IE strikes again. |
|
@gkalpak Confirmed that wrapping in span tags is a functioning workaround for us. Thank you for the help. I'm sure you guys will keep working on a more permanent workaround within angular and I'll stay tuned. |
|
@gkalpak is there an ETA on a solution to this in the angular code? |
|
@jshoudy11, I am planning to look into this |
|
@gkalpak what is the status of this? |
Related to angular#11796. Fixes angular#14924 BREAKING CHANGE: // TODO
|
@jshoudy11, I have a fix for this on my fork (for 1.6.x), but I am not very happy with it. And it's kind of a breaking change, so I guess it won't be backported to 1.5.x. Here is the fix: gkalpak@3ad0acd Your safest bet is still to always wrap transcuded (top-level) text nodes. I'll open a PR soon. |
As explained in angular#11781 and angular#14924, IE11 can (under certain circumstances) break up a text node into multiple consecutive ones, breaking interpolated expressions (e.g. `{{'foo'}}` would become `{{` + `'foo'}}`). To work-around this IE11 bug, angular#11796 introduced extra logic to merge consecutive text nodes (on IE11 only), which relies on the text nodes' having the same `parentNode`. This approach works fine in the common case, where `compileNodes` is called with a live NodeList object, because removing a text node from its parent will automatically update the latter's `.childNodes` NodeList. It falls short though, when calling `compileNodes` with either a jqLite/jQuery collection or an Array. In fails in two ways: 1. If the text nodes do not have a parent at the moment of compiling, there will be no merging. (This happens for example on directives with `$transclude: {...}`.) 2. If the text nodes do have a parent, just removing a text node from its parent does **not** remove it from the collection/array, which means that the merged text nodes will still get compiled and linked (and possibly be displayed in the view). E.g. `['{{text1}}', '{{text2}}', '{{text3}}']` will become `['{{text1}}{{text2}}{{text3}}', '{{text2}}', '{{text3}}']`. -- This commit works around the above problems by: 1. Merging consecutive text nodes in the provided list, even if they have no parent. 2. When merging a txt node, explicitly remove it from the list (unless it is a live, auto-updating list). This can nonetheless have undesirable (albeit rare) side effects by overzealously merging text nodes that are not meant to be merged (see "BREAKING CHANGE" section below). Fixes angular#14924 BREAKING CHANGE: **Note:** Everything described below affects **IE11 only**. Previously, consecutive text nodes would not get merged if they had no parent. They will now, which might have unexpectd side effects in the following cases: 1. Passing an array or jqLite/jQuery collection of parent-less text nodes to `$compile` directly: ```js // Assuming: var textNodes = [ document.createTextNode('{{'), document.createTextNode('"foo"'), document.createTextNode('}}') ]; var compiledNodes = $compile(textNodes)($rootScope); // Before: console.log(compiledNodes.length); // 3 console.log(compiledNodes.text()); // {{'foo'}} // After: console.log(compiledNodes.length); // 1 console.log(compiledNodes.text()); // foo // To get the old behavior, compile each node separately: var textNodes = [ document.createTextNode('{{'), document.createTextNode('"foo"'), document.createTextNode('}}') ]; var compiledNodes = angular.element(textNodes.map(function (node) { return $compile(node)($rootScope)[0]; })); ``` 2. Using multi-slot transclusion with non-consecutive, default-content text nodes (that form interpolated expressions when merged): ```js // Assuming the following component: .compoent('someThing', { template: '<ng-transclude><!-- Default content goes here --></ng-transclude>' transclude: { ignored: 'veryImportantContent' } }) ``` ```html <!-- And assuming the following view: <some-thing> {{ <very-important-content>Nooot</very-important-content> 'foo'}} </some-thing> <!-- Before: --> <some-thing> <ng-transclude> {{ <-- Two separate 'foo'}} <-- text nodes </ng-transclude> </some-thing> <!-- After: --> <some-thing> <ng-transclude> foo <-- The text nodes were merged into `{{'foo'}}`, which was then interpolated </ng-transclude> </some-thing> <!-- To (visually) get the old behavior, wrap top-level text-nodes on <!-- multi-slot transclusion directives into `<span>`; e.g.: <some-thing> <span>{{</span> <very-important-content>Nooot</very-important-content> <span>'foo'}}</span> </some-thing> <!-- Result: --> <some-thing> <ng-transclude> <span>{{</span> <-- Two separate <span>'foo'}}</span> <-- nodes </ng-transclude> </some-thing> ```
As explained in angular#11781 and angular#14924, IE11 can (under certain circumstances) break up a text node into multiple consecutive ones, breaking interpolated expressions (e.g. `{{'foo'}}` would become `{{` + `'foo'}}`). To work-around this IE11 bug, angular#11796 introduced extra logic to merge consecutive text nodes (on IE11 only), which relies on the text nodes' having the same `parentNode`. This approach works fine in the common case, where `compileNodes` is called with a live NodeList object, because removing a text node from its parent will automatically update the latter's `.childNodes` NodeList. It falls short though, when calling `compileNodes` with either a jqLite/jQuery collection or an Array. In fails in two ways: 1. If the text nodes do not have a parent at the moment of compiling, there will be no merging. (This happens for example on directives with `$transclude: {...}`.) 2. If the text nodes do have a parent, just removing a text node from its parent does **not** remove it from the collection/array, which means that the merged text nodes will still get compiled and linked (and possibly be displayed in the view). E.g. `['{{text1}}', '{{text2}}', '{{text3}}']` will become `['{{text1}}{{text2}}{{text3}}', '{{text2}}', '{{text3}}']`. -- This commit works around the above problems by: 1. Merging consecutive text nodes in the provided list, even if they have no parent. 2. When merging a txt node, explicitly remove it from the list (unless it is a live, auto-updating list). This can nonetheless have undesirable (albeit rare) side effects by overzealously merging text nodes that are not meant to be merged (see "BREAKING CHANGE" section below). Fixes angular#14924 BREAKING CHANGE: **Note:** Everything described below affects **IE11 only**. Previously, consecutive text nodes would not get merged if they had no parent. They will now, which might have unexpectd side effects in the following cases: 1. Passing an array or jqLite/jQuery collection of parent-less text nodes to `$compile` directly: ```js // Assuming: var textNodes = [ document.createTextNode('{{'), document.createTextNode('"foo"'), document.createTextNode('}}') ]; var compiledNodes = $compile(textNodes)($rootScope); // Before: console.log(compiledNodes.length); // 3 console.log(compiledNodes.text()); // {{'foo'}} // After: console.log(compiledNodes.length); // 1 console.log(compiledNodes.text()); // foo // To get the old behavior, compile each node separately: var textNodes = [ document.createTextNode('{{'), document.createTextNode('"foo"'), document.createTextNode('}}') ]; var compiledNodes = angular.element(textNodes.map(function (node) { return $compile(node)($rootScope)[0]; })); ``` 2. Using multi-slot transclusion with non-consecutive, default-content text nodes (that form interpolated expressions when merged): ```js // Assuming the following component: .compoent('someThing', { template: '<ng-transclude><!-- Default content goes here --></ng-transclude>' transclude: { ignored: 'veryImportantContent' } }) ``` ```html <!-- And assuming the following view: --> <some-thing> {{ <very-important-content>Nooot</very-important-content> 'foo'}} </some-thing> <!-- Before: --> <some-thing> <ng-transclude> {{ <-- Two separate 'foo'}} <-- text nodes </ng-transclude> </some-thing> <!-- After: --> <some-thing> <ng-transclude> foo <-- The text nodes were merged into `{{'foo'}}`, which was then interpolated </ng-transclude> </some-thing> <!-- To (visually) get the old behavior, wrap top-level text-nodes on --> <!-- multi-slot transclusion directives into `<span>`; e.g.: --> <some-thing> <span>{{</span> <very-important-content>Nooot</very-important-content> <span>'foo'}}</span> </some-thing> <!-- Result: --> <some-thing> <ng-transclude> <span>{{</span> <-- Two separate <span>'foo'}}</span> <-- nodes </ng-transclude> </some-thing> ```
|
@jshoudy11, #15025 has been merged. Feel free to try it out and report back 😄 |
|
@gkalpak is it only in 1.6 (as you originally suspected) or is it backported to 1.5.x as well? |
|
1.6.x only. |
|
@gkalpak will this ever be backported to 1.5.x? Our project is currently on 1.5 with no immediate plans to upgrade to 1.6. We have to continue to use the span work around unless this is backported |
|
Other question: when will 1.6 be available in google3? Currently 1.5 is the latest version |
Nope, because it is a breaking change.
Iirc you were using custom snapshot build, no? If that is true, you are already using 1.6 pre-alpha 😃
It has to be released first, I guess (which will hopefully happen soon(-ish)). |
Bug
Certain interpolations are being broken into multiple spans. For example in a template we have
{{ctrl.variableName}}.
In Chrome, Firefox, Safari, Edge this always becomes Text associated with variable
but in IE11 in CJK languages this is becoming {{ctrl.variableName}} which displays on our page as the variable.
There are several places this bug is displayed in production for our site but I will include steps to reproduce for just one of them.
To reproduce:
Here is a screenshot of the issue:
** Details **
This is a bug specific to IE11 (and earlier IE). I'm using IE version 11.0.10240.16603 on Windows 10 Enterprise. We are running angular 1.5 but this also occurred in 1.4
The text was updated successfully, but these errors were encountered: