Interpolations containing HTML entities fail in IE11 when MutationObservers are active #11781
Description
Text nodes that contain unicode / HTML entities are not properly interpolated in IE11 when there is a MutationObserver active. Consider the following example.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script>
window.addMutationObserver = function(){
if(!window.MutationObserver){
return;
}
new window.MutationObserver(function(){}).observe(document.body, {
childList: true,
subtree: true
});
};
angular.module('example', []);
</script>
</head>
<body onload="addMutationObserver()" ng-app="example">
<span>{{ 'This works.' }}</span>
<span>— {{ "This doesn't." }}</span>
</body>
</html>The output is:
This works. — {{ "This doesn't." }}
If you remove the MutationObserver the code works as expected. If you don't set subtree: true the code works as expected. If you remove the entity it also works as expected. If instead you replace the entity with the actual character (—) it remains broken. It's also broken in 1.3.
We recently started seeing this bug because Wordpress has some Emoji polyfills that use MutationObserver. This issue breaks interpolation even when the Angular application is running in an iframe and the code that is attaching the MutationObserver is in the parent frame, which seems pretty crazy. Because of this we seek a workaround on the Angular side, as we can't change every site that might embed Angular in an iframe -- perhaps this is a bug in IE.