Gmail doesn't obey embedded emoji height CSS

[pento]

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.

[pareshradadiya]

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

[janhenckens]

max-height for emoji

[janhenckens]

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)

[pento]

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.

[janhenckens]

Fixes inline emoji styling

[janhenckens]

Hey @pento, thanks for the pointer!

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

[pento]

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

[janhenckens]

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

[pento]

Looking good, thanks!

[pento]

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.

[pento]

In 31909:

Emoji: [31864] changed emoji image's inline style from height to max-height. Unfortunately, anything using feedparser.py (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.