Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#32109 closed defect (bug) (fixed)

Emoji: JavaScript error in Internet Explorer 9 and 10

Reported by: germozy's profile germozy Owned by: azaozz's profile azaozz
Milestone: 4.2.2 Priority: normal
Severity: normal Version: 4.2
Component: Formatting Keywords: fixed-major has-patch
Focuses: javascript Cc:

Description

There is a javascript error in wp-includes/js/twemoji.min.js. The problem appears in Internet Explorer 9 and 10.
Unable to get property 'childNodes' of undefined or null reference.

http://fs2.directupload.net/images/150424/77zoplfe.png

Attachments (4)

error.png (258.2 KB) - added by germozy 10 years ago.
32109.1.diff (1.7 KB) - added by peterwilsoncc 10 years ago.
Ensure document.body is defined
32109.2.diff (3.7 KB) - added by azaozz 10 years ago.
32109.3.diff (4.0 KB) - added by azaozz 10 years ago.

Download all attachments as: .zip

Change History (19)

@germozy
10 years ago

#1 @DrewAPicture
10 years ago

  • Component changed from General to Formatting
  • Focuses javascript added

This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.


10 years ago

@peterwilsoncc
10 years ago

Ensure document.body is defined

#3 @peterwilsoncc
10 years ago

Looks like wp-emoji.js was passing document.body to be parsed before it existed.

Per discussion in slack, I've changed the IE8 check to for IE8, IE9 or IE10.

As a fail safe, in the looping waiting for twemoji to load, I've added a check that document.body is defined.

#4 @azaozz
10 years ago

32109.1.diff changes all IE < 11 to wait for body.onload which can fire much later if there is a slow loading image, etc.

A better solution seems to be to use DOMContentLoaded which is supported everywhere except IE < 9. Then keep document.readyState === 'complete' for IE8. For this we will need to set a var in case DOMContentLoaded fires before wp-emoji.js is loaded.

Last edited 10 years ago by azaozz (previous) (diff)

@azaozz
10 years ago

#5 @azaozz
10 years ago

In 32109.2.diff:

  • Use DOMContentLoaded to initialize wp-emoji.
  • Use readystatechange and document.readyState === 'complete' as fallback in case DOMContentLoaded is not supported (IE < 9 and other really outdated browsers).

Tested in Firefox, Chrome, IE11, IE8. Needs testing in IE10 and 9 just in case, and perhaps in other obscure browsers if somebody has one handy.

#6 @peterwilsoncc
10 years ago

WFM on BrowserStack instances of:
Win7/IE10
Win7/IE9
Win7/FF3.6
Win7/Old Safaris and Operas

Win8/IE10
Win8/IE10metro

@azaozz
10 years ago

#7 @azaozz
10 years ago

  • Milestone changed from Awaiting Review to 4.2.1

In 32109.3.diff: use the same events as jQuery( document ).ready() (the compat branch).

Tested in Firefox, Chrome, IE11 and 8. Still good to test in native/not-emulated browsers.

#8 @DrewAPicture
10 years ago

  • Keywords has-patch needs-testing added

This ticket was mentioned in Slack in #core by ocean90. View the logs.


10 years ago

#10 @azaozz
10 years ago

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

In 32334:

Emoji:

  • Fix loading errors in IE9 and IE10.
  • Add fallbacks for the loading events.

Fixes #32109 for trunk.

#11 @azaozz
10 years ago

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

Reopen for 4.2.

#12 @pento
10 years ago

#32252 was marked as a duplicate.

#13 @azaozz
10 years ago

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

In 32361:

Emoji:

  • Fix loading errors in IE9 and IE10.
  • Add fallbacks for the loading events.

Fixes #32109 for 4.2.

#14 @ocean90
10 years ago

  • Summary changed from Error in emoji to Emoji: JavaScript error in Internet Explorer 9 and 10

#15 @jobst
10 years ago

I initially reported this as #32252.
Just installed latest wordpress 4.2.2 on my life sites.
Tested it in IE10 - I do not get those errors anymore - thanks for fixing this, and including the debugging for the wp-emoji ;-)
Jobst

Note: See TracTickets for help on using tickets.