WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#35977 closed defect (bug) (fixed)

WP Emojis & IE 11 & Youtube subtitle broken

Reported by: bufny Owned by: pento
Milestone: 4.4.3 Priority: normal
Severity: normal Version: 4.2
Component: Emoji Keywords: has-screenshots has-patch fixed-major
Focuses: ui, javascript Cc:

Description

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.

Attachments (1)

35977.diff (1.2 KB) - added by pento 2 years ago.

Download all attachments as: .zip

Change History (9)

#1 @afercia
2 years ago

  • Keywords reporter-feedback added

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.

#2 @bufny
2 years ago

  • Keywords reporter-feedback removed

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.

#3 @afercia
2 years ago

  • Focuses ui javascript added
  • Keywords has-screenshots needs-patch added

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:

https://cldup.com/fmQgtmI5Dd.jpg

Youtube embed code:

https://cldup.com/D52N5dUF-R.jpg

@pento
2 years ago

#4 @pento
2 years ago

  • Keywords has-patch needs-testing 2nd-opinion added; needs-patch removed
  • Milestone changed from Awaiting Review to 4.4.3
  • Version changed from 4.4.2 to 4.2

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?

#5 @pento
2 years ago

  • Owner set to pento
  • Resolution set to fixed
  • Status changed from new to closed

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.

#6 @pento
2 years ago

  • Keywords fixed-major added; needs-testing 2nd-opinion removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for merge to 4.4 branch.

#7 @azaozz
2 years ago

In 36981:

Fix typo in wp-emoji.js.

See #35977.

#8 @pento
2 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.