WP Emojis & IE 11 & Youtube subtitle broken

[bufny]

I'm reporting this here since Emojis is in the core.

If the Emojis script is inserted in the header, in an embedded youtube video with subtitles, subtitles get broken on IE 11 (Windows 10). The bug is not reproduced with Edge, Chrome or Firefox. Some subtitles lines are broken in the following way: they are miss positioned and the get displayed twice.

To reproduce the bug, just embed a youtube video with subtitles in a page and open it with IE 11.

[afercia]

Hello @bufny and welcome to Trac! I've tried to reproduce, embedding this video: ​https://www.youtube.com/watch?v=QRS8MkLhQmM and couldn't notice any issue. Tested using IE 11 on Windows 10, all plugins disabled, Twenty Fifteen and Twenty Sixteen as themes.
Does it still happens for you with all plugins disabled and a default theme active? If it still happens, could you link the video where this is happening? Thanks.

[bufny]

Hi and thank you for taking a look at this issue.

I was able to reproduce it on a fresh WP 4.4.2 instance, no plugins, running Twenty Fifteen, IE 11 Windows 10, with this video:

​https://www.youtube.com/watch?v=8nmZNfHZIEI

The embedded code is the iframe code provided by youtube. Please be patient as some subtitles lines appear normally and some others get messed up. I didn't provide a youtube video link from the beginning in order not to be considered spam. I discovered this when trying to embed a presentation video of my university on the university's website, then I tried to reproduce it with other videos from youtube - and it was pretty easy to find another affected one.

The problem disappears with Disable Emojis plugins installed (without the <script type="text/javascript">window._wpemojiSettings ... injected script in the header).

Thank you.

[afercia]

I've managed to reproduce the issue, see screenshots below. Looks like Youtube captions work differently for IE, basically each caption row is in a new element that gets injected in the DOM while for other browsers they just update the content of a div. Not sure if MutationObserver is supposed to look also at changes within an iframe, but looks like IE 11 is doing that. For a quick check, I've tried to change observe() option subtree to false and the bug disappeared. cc @pento :)

WordPress embed:

Youtube embed code:

[pento]

IE 11 was the first version of IE to implement MutationObserver, it seems there are some bugs.

35977.diff​ fixes this, based on the fix for ​a similar bug in Angular.

@iseulde, could I get you to sanity check this patch?

[pento]

In 36817:

Emoji: Add some extra IE11 compatibility.

IE 11's implementation of MutationObserver is buggy. It unnecessarily splits text nodes when it encounters a HTML template interpolation symbol ( "{{", for example ). So, we join the text nodes back together as a work-around.

Fixes #35977 for trunk.

[pento]

Re-opening for merge to 4.4 branch.

[azaozz]

In 36981:

Fix typo in wp-emoji.js.

See #35977.

[pento]

In 37089:

Emoji: Add some extra IE11 compatibility.

IE 11's implementation of MutationObserver is buggy. It unnecessarily splits text nodes when it encounters a HTML template interpolation symbol ( "{{", for example ). So, we join the text nodes back together as a work-around.

Merge of [36817] and [36981] to the 4.4 branch.

Fixes #35977.