Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#34640 closed defect (bug) (fixed)

Twemoji fallback doesn't kick in on subsequent DOM mutations

Reported by: rmccue's profile rmccue Owned by: pento's profile pento
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.2
Component: General Keywords: has-patch
Focuses: javascript Cc:


Fun bug I found and tracked down with @pento:

  1. Set an element's content via innerHTML to an emoji character
  2. Observe the content has been replaced with Twemoji correctly
  3. Set the element's content to the exact same value again
  4. Observe the content has been not replaced

You can try this on any page our Twemoji replacement is loaded on:

window.setInterval(function () { document.querySelector('div').innerHTML = '\ud83d\ude3d'; }, 500);

Attachments (2)

34640.diff (1.0 KB) - added by pento 9 years ago.
34640.2.diff (1.8 KB) - added by pento 9 years ago.

Download all attachments as: .zip

Change History (11)

#1 @rmccue
9 years ago

  • Focuses javascript added
  • Owner set to pento
  • Status changed from new to assigned

#2 @rmccue
9 years ago

With the example code, you can see Firefox will continue toggling back and forth between Twemoji and native every 0.5s; Chrome will only toggle once, then stick on native.

9 years ago

#3 @pento
9 years ago

  • Keywords 2nd-opinion has-patch added
  • Milestone changed from Awaiting Review to 4.4
  • Version set to 4.2

34640.diff fixes the bug, but I'd like second opinion from @azaozz or @iseulde, if they think this is the best way to go about it.

#4 @iseulde
9 years ago

That whole conditional is there to detect an image error, so if Twemoji reverts an image to text. If we add an attribute to detect the error instead, we can remove everything else in the conditional. Maybe we should also add onerror as a setting instead of patching Twemoji?

#5 @iseulde
9 years ago

Summary of the problem: if you replace an emoji image with the emoji text, we think it's an error, the observer will ignore it, and Twemoji won't parse at that time.

9 years ago

#6 @pento
9 years ago

@iseulde: Good idea, I've revised the patch so that onerror is now an option - we can easily contribute that back upstream.

Unfortunately, we need to keep several of the checks in that conditional (need to make sure removedNodes[0] will be defined, and that nodeName === 'IMG', because text nodes don't have the getAttribute() method. I just left the conditional the same in 34640.2.diff, but if you're comfortable removing some of the checks, I'm cool with that.

#7 @iseulde
9 years ago

Ah onerror is not an option? Sorry, thought it was since all the other properties were options.

#8 @pento
9 years ago

  • Keywords 2nd-opinion removed

#9 @pento
9 years ago

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

In 35637:

Emoji: Ensure twemoji kicks in on certain DOM mutations.

Twemoji will replace the img with the emoji character, in the event that the image fails to load. We deliberately avoid trying to change that emoji character when it's changed back. We do need to replace emoji characters that are changed by something other than Twemoji, which this rectifies.

Fixes #34640.

Note: See TracTickets for help on using tickets.