Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#31719 closed defect (bug) (fixed)

Gmail doesn't obey embedded emoji height CSS

Reported by: pento's profile pento Owned by: pento's profile pento
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.2
Component: Emoji Keywords: emoji good-first-bug has-patch commit
Focuses: Cc:


When an <img> has an inline CSS rule using height, it's transformed info min-height. This means that we get massive smilies and emoji in emails.

The fix is to change height to max-height.

Attachments (3)

31719.patch (443 bytes) - added by janhenckens 9 years ago.
max-height for emoji
31719-2.patch (1.1 KB) - added by janhenckens 9 years ago.
Fixes inline emoji styling
31719-3.patch (1.6 KB) - added by janhenckens 9 years ago.

Download all attachments as: .zip

Change History (16)

#1 @pento
9 years ago

  • Keywords emoji added

#2 @DrewAPicture
9 years ago

  • Keywords good-first-bug needs-patch added

#3 @pareshradadiya
9 years ago

I just ran into this issue and solved it by setting max-height which it doesn't mess with.

9 years ago

max-height for emoji

#4 @janhenckens
9 years ago

  • Keywords has-patch added; needs-patch removed

I attached a patch that should fix this, could you guys test this? (my core install doesn't seem to be sending email for some reason so I couldn't test it myself)

#5 @DrewAPicture
9 years ago

  • Owner set to janhenckens
  • Status changed from new to assigned

#6 @pento
9 years ago

  • Keywords needs-refresh added

Thanks for the patch, @janhenckens!

Instead of the CSS block, we need to change the inline style defined on the emoji and smiley <img> tags. There are two defined in wp_staticize_emoji(), and one in translate_smiley(), both in formatting.php.

9 years ago

Fixes inline emoji styling

#7 @janhenckens
9 years ago

Hey @pento, thanks for the pointer!

I added a second patch that fixes the inline styles, could you give that a try? Thanks!

#8 @pento
9 years ago

Hey @janhenckens, there's a second <img> tag in wp_staticize_emoji(), could you fix that one up, too?

9 years ago

#9 @janhenckens
9 years ago

Missed that one, patch 3 includes all three of them.

#10 @pento
9 years ago

  • Keywords commit added; needs-refresh removed
  • Owner changed from janhenckens to pento

Looking good, thanks!

#11 @pento
9 years ago

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

In 31864:

Emoji: Gmail doesn't obey an <img>'s inline CSS height rule, transforming it to min-height. To avoid giant smiley faces everywhere, we're changing the height rule to max-height, which Gmail plays nicer with.

Props janhenckens.

Fixes #31719.

#12 @pento
9 years ago

In 31909:

Emoji: [31864] changed emoji image's inline style from height to max-height. Unfortunately, anything using (for example, NewsBlur) strips out max-height, which gives us massive emoji in feeds.

This re-adds height, and also reminds us why we can't have nice things.

See #31719.

#13 @pento
8 years ago

  • Component changed from Mail to Emoji
Note: See TracTickets for help on using tickets.