Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#31628 closed defect (bug) (fixed)

Cannot Highlight Emoji In Some Browsers

Reported by: mrwweb's profile mrwweb Owned by: azaozz's profile azaozz
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: TinyMCE Keywords: has-patch commit
Focuses: Cc:


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.

Attachments (1)

31628.patch (669 bytes) - added by iseulde 9 years ago.

Download all attachments as: .zip

Change History (9)

#1 @iseulde
9 years ago

  • Milestone changed from Awaiting Review to 4.2

How should it be styled? Dotted line?

#2 @mrwweb
9 years ago

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.

#3 @pento
9 years ago

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?

9 years ago

#4 follow-up: @iseulde
9 years ago

  • Keywords has-patch added

Is this better?

#5 in reply to: ↑ 4 @mrwweb
9 years ago

Replying to iseulde:

Is this better?

That seems to fix it on my end.

#6 @DrewAPicture
9 years ago

  • Keywords commit added

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).

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

9 years ago

#8 @azaozz
9 years ago

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

In 31822:

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

Note: See TracTickets for help on using tickets.