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 inline SVGs same as HTML nodes. The nodeType is still === 1, so Twemoji happily processes them when these nodes are dynamically updated with JS. 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://topografieindeklas.nl/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.