Cannot Highlight Emoji In Some Browsers

[mrwweb]

In Windows 8.1 in Chrome 40 and IE 11 I cannot see the selection/highlight of emoji characters

If an emoji is part of a selection, it's not too bad, but if the selection is entirely emoji and without spaces, there is no visual cue that a selection has been made

Firefox 33 works as expected.

[iseulde]

How should it be styled? Dotted line?

[mrwweb]

Here's Chrome:

And here's Firefox which makes a lot more sense to me:

Chrome even works on the front-end, just not the back:

I'm not particularly picky, but I just think there needs to be something that's clear and easy to understand a la Firefox. These are all images, so I wonder if true emoji's work with highlighting better.

[pento]

It's caused by the img::selection rule in /wp-includes/js/tinymce/skins/wordpress/wp-content.css.

Maybe changing it to img:not(.emoji)::selection would be enough?

[iseulde]

Is this better?

[mrwweb]

Replying to iseulde:

Is this better?

That seems to fix it on my end.

[DrewAPicture]

31628.patch​ fixes highlighting for me on Windows 7, in latest Chrome and IE 9, 10, and 11 (IE7 and 8 already worked with fallbacks).

[azaozz]

In 31822:

TinyMCE emoji: fix highlighting of selected replacement images in Chrome.
Props iseulde. Fixes #31628.