Emoji script is producing errors on pages with SVG content

[martynasma]

On pages that contain dynamic SVG content, such as charts generated by JavaScript, Emoji script wp-emoji-release.min.js produces multiple errors like this:

Uncaught TypeError: node.className.indexOf is not a function

The error is caused by the script traversing through document nodes, going into SVG nodes and checking indexOf of their className which is not a function, resulting in JS error reported on every SVG <path> node.

The error originates in this line: (taken from unminified version)

if ( ! node || ( node.className && node.className.indexOf( 'wp-exclude-emoji' ) !== -1 ) ) {
   continue;
}

[azaozz]

Looks like this can be fixed by doing:

if ( ! node || ( node.className && typeof node.className === 'string' && node.className.indexOf( 'wp-exclude-emoji' ) !== -1 ) ) {
   continue;
}

However, seems we shouldn't be looking inside SVGs in the first place. Not sure what will happen if we replace emoji chars inside SVGs.

[martynasma]

Replying to azaozz:

Looks like this can be fixed by doing:

if ( ! node || ( node.className && typeof node.className === 'string' && node.className.indexOf( 'wp-exclude-emoji' ) !== -1 ) ) {
   continue;
}

However, seems we shouldn't be looking inside SVGs in the first place. Not sure what will happen if we replace emoji chars inside SVGs.

Yes, I suppose trying to modify SVG content doesn't make much sense and is quite dangerous, since it's not HTML.

I hope you can find a way to exclude SVG from emoji application.

[azaozz]

32305.patch fixes it here however needs testing in all possible browsers that support SVG, especially older Android :)

[dway]

The patch works for me on regular browsers on OSX Yosemite.
Really annoying bug putting down all the website I've made containing a Leaflet map...

[chriscct7]

This is not a critical level bug by any stretch

[dway]

Well, from my point of view, it blocks execution of javascript after the error, so it's critical regarding the well working of a website. But I may be wrong.

[azaozz]

In 32478:

Emoji: do not try to replace emoji chars inside dynamic SVGs.
Fixes #32305 for trunk.

[azaozz]

Reopen for 4.2.

[pento]

Wouldn't it be easier to just add SVG to the shouldntBeParsed regex?

[nacin]

Looks like it, pento.

[azaozz]

Yep, good for that to be added too. The problem here seems to be that the browsers treat the nodes inside dynamically updated inline SVGs same as HTML nodes. The nodeType is still === 1, so Twemoji happily processes them. That triggers an error as the inner SVG nodes className is an object, not a string.

[peterwilsoncc]

#32338 was marked as a duplicate.

[harmr]

This issue affects my free mapping plugin "​Leaflet Maps Marker" as well as the pro version "​Maps Marker Pro".

I had some reports from users lately saying that IE suddenly crashed when viewing Google Maps on backend. I was not sure what could have caused this until I found ​this related comment which states that Google Maps API loading was blocked as a result. Anyway it is difficult to reproduce this issue on my server - what I know for sure is that each time a "layer map" from my plugin is shown, the following javascript errors are produced which I see via debug panel/javascript tab:

Object does not support this property or method "indexOf" ​https://localhost/wp-includes/js/wp-emoji-release.min.js?ver=4.2.2 line 4

it would really be great if this issue could be solved with 4.2.3

[harmr]

Just got a confirmation from a user: once she installed ​https://wordpress.org/plugins/disable-emojis/ the Google map stopped crashing in IE - so this is definitely an issue for sites using leaflet.js as mapping framework...

[dhunink]

Just to add a bit more detail to the last comment of @harmr: it's not only on Google Map users. I've encountered the exact samen problemen on ​https://tpgrf.nl/testserver/alpha/topotrainer/nederland/, which depends on the ArcGIS Online Javascript API. I believe their not using leaflet.js as a framework, since ArcGIS is a framework on its own.
But it's defiantly the SVG issue: the ArcGIS API is using SVG to display maps.

[harmr]

how high is the chance that the fix will ab available with WordPress 4.2.3 soon? Having more and more users reporting this issue & the only thing I can recommend at the moment is to disable emojis which also is sub-optimal...

[harmr]

as it seems there will be no 4.2.3 version I wonder if this fix can be targeted for next 4.3-beta release? I would really need to get this fix for my customers ASAP as it is really causing severe issues/crashes with IE (​newest related support request)

Not sure about the procedure here: if there is a fix for a bug scheduled for a minor release that seems unlikely to be released, will the fix make it automatically into the next major release?

[azaozz]

Replying to harmr:

This is in beta1. It has been in trunk for 8 weeks, since [32478]. Additionally we reported it upstream, it was fixed, and Twemoji was updated to include the fix in #32203.

[chriscct7]

Replying to harmr:

as it seems there will be no 4.2.3 version I wonder if this fix can be targeted for next 4.3-beta release? I would really need to get this fix for my customers ASAP as it is really causing severe issues/crashes with IE (​newest related support request)

Not sure about the procedure here: if there is a fix for a bug scheduled for a minor release that seems unlikely to be released, will the fix make it automatically into the next major release?

There will be a 4.2.3. Please don't alter severity.

[harmr]

thanks for the info & I looked through the list of solved tickets for 4.3-beta1 and did find a reference to this one, so I thought it would not be included.

[samuelsidler]

Replying to harmr:

thanks for the info & I looked through the list of solved tickets for 4.3-beta1 and did find a reference to this one, so I thought it would not be included.

Trac can be confusing. A ticket can only have one milestone, so when we want to fix an issue in both a major and minor release, we use the minor release as the milestone. In this case, 4.2.3. After the initial commit, we add a keyword to note that the issue is fixed in the major release: "fixed-major." It's not always easy to figure out, but that's why you don't see a ticket in the list of 4.3 beta tickets.

[azaozz]

In 33312:

Emoji: do not try to replace emoji chars inside SVGs.
Fixes #32305 for 4.2.