WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#31628 closed defect (bug) (fixed)

Cannot Highlight Emoji In Some Browsers

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

Description

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 7 years ago.

Download all attachments as: .zip

Change History (9)

#1 @iseulde
7 years ago

  • Milestone changed from Awaiting Review to 4.2

How should it be styled? Dotted line?

#2 @mrwweb
7 years ago

Here's Chrome:
http://mrwweb.com/files/wp-trac/emoji-highlight-chrome40.png

And here's Firefox which makes a lot more sense to me:
http://mrwweb.com/files/wp-trac/emoji-highlight-ff33.png

Chrome even works on the front-end, just not the back:
http://mrwweb.com/files/wp-trac/emoji-highlight-chrome40-front.png

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
7 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?

@iseulde
7 years ago

#4 follow-up: @iseulde
7 years ago

  • Keywords has-patch added

Is this better?

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

Replying to iseulde:

Is this better?

That seems to fix it on my end.

#6 @DrewAPicture
7 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.


7 years ago

#8 @azaozz
7 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.