search

hteumeuleu / email-bugs

Email quirks and bugs
537 stars 20 forks source link

Yahoo converts the height property to min-height #9

Open hteumeuleu opened 8 years ago

hteumeuleu commented 8 years ago

Gmail and Yahoo convert the CSS height property to min-height. The following code : 

<img src="http://i.imgur.com/0HuZSwt.jpg" alt="" width="636" height="347" style="width:100%; max-width:636px; height:auto;" />

…is turned into : 

<img src="http://i.imgur.com/0HuZSwt.jpg" alt="" width="636" height="347" style="width:100%; max-width:636px; min-height:auto;" />

This is problematic because the image might now appear squashed if it's displayed below it's maximum width. In order to prevent this, it's best advised to avoid using the height attribute in HTML and be cautious when using height in CSS.

This happens across all Gmail clients (desktop webmail, mobile webmail, iOS app, Android app, and Inbox clients as well) and Yahoo clients (desktop webmail, iOS app).

This was also discussed here :

hteumeuleu commented 8 years ago

Yahoo does the same thing.

hteumeuleu commented 8 years ago

The desktop webmail of Gmail no longer does this after the 2016 update. But Inbox by Gmail still does.

bfulop commented 8 years ago

I have the impression that Yahoo doesn't do it anymore. What I'm seeing is that in the inline styles height gets converted to min-height but in my media queries they're preserved as height

jkupczak commented 6 years ago

It's the end of 2017 and this is still happening in the Yahoo Mail! app when an image has a height attribute declared inline. My smaller images scale just fine, but the larger ones (larger than the viewport I assume) scale incorrectly.

I removed the height="" attribute from the image tag (leaving it with no inline height declarations at all) and the image scaled properly in the Yahoo! Mail app.

You suggest:

In order to prevent this, it's best advised to avoid using the height attribute in HTML and be cautious when using height in CSS.

Is this a viable solution? Or will leaving the height attribute off of an <img> tag have adverse effects in other clients?

ghost commented 6 years ago

I was able to workaround this by using a max-height inline style instead of height.

was converted to
While
was left as it is Hope this helps.
hteumeuleu commented 6 years ago

After a report by @jkupczak on the #emailgeeks Slack yesterday, it seems that this bug is back in the Gmail Android app. The height property in CSS is transformed into min-height. A solution still consists in avoiding to declare the height of an element that is susceptible to change. I have tested across all Gmail clients (including Inbox), and Gmail Android seems to be the only one affected so far.

Here's a test email I used.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>La Joconde</title>
</head>
<body>
    <div style="margin:0 auto;">
        <a href="https://fr.wikipedia.org/wiki/La_Joconde"><img src="http://i.imgur.com/Mr8hwAJ.jpg" border="0" alt="La Joconde" width="1058" height="1600" style="display:block; width:100%; height:auto;" /></a>
        <p style="Margin:1em 0; text-align:right; color:#333; font:1em/1.5 serif;"><em>La Joconde</em>, L&eacute;onard de Vinci</p>
    </div>
</body>
</html>
hteumeuleu commented 6 years ago

By request on Slack, I ran a new test this morning and it seems this bug is no longer in Gmail Android. Here's the test on Email on Acid.

hteumeuleu commented 5 years ago

Following a conservation on Slack today, it seems this bug is back on the last version of the desktop webmail of Yahoo.

casperfloor-wunderman commented 5 years ago

I'm also seeing this issue when using background images, since I can't omit the height property. Is there a way to prevent Yahoo from collapsing the container?

In this case I don't want the height to be controlled by a nested HTML element, since it will be of variable height.

Haritsinh commented 5 years ago

As of May-2019 i have tested height inline style on image in my mail and i have tested it on gmail and yahoo mail, in Gmail it is working fine as expected but Yahoo mail transforms its height to min-height so i have found workaround to add max-height property in inline style and now its working fine.

i just wanted to fix height of image as 30px so i have given inline style as style="height:30px;max-height:30px;" and it is working fine on yahoo mail also.

hteumeuleu commented 4 years ago

I relaunched a test with the code posted here and I'm not longer seeing this bug in any Yahoo email client (desktop webmail, iOS app, Android app) neither in any Gmail client (desktop webmail, mobile webmail, iOS app, Android app, GANGA). So I guess it's over!

casperfloor-wunderman commented 4 years ago

This is great news! Thanks for letting me know.

Kind regards, Casper

From: HTeuMeuLeu notifications@github.com Reply to: hteumeuleu/email-bugs reply@reply.github.com Date: Thursday, 18 June 2020 at 10.00 To: hteumeuleu/email-bugs email-bugs@noreply.github.com Cc: Casper Floor casper.floor@wundermanthompson.com, Comment comment@noreply.github.com Subject: Re: [hteumeuleu/email-bugs] Yahoo converts the height property to min-height (#9)

I relaunched a test with the code posted herehttps://github.com/hteumeuleu/email-bugs/issues/9#issuecomment-375336565 and I'm not longer seeing this bug in any Yahoo email client (desktop webmail, iOS app, Android app) neither in any Gmail client (desktop webmail, mobile webmail, iOS app, Android app, GANGA). So I guess it's over!

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/hteumeuleu/email-bugs/issues/9#issuecomment-645850870, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AJVZZHMEHPNKY3DP43HE5HTRXHCSBANCNFSM4BW6TXEQ.

wilbertheinen commented 4 years ago

In case if it's not yet working for you could use the following yahoo specific class:

<style>
 .& .y-grid {
    display: grid
 }
</style>
...
<td style="height: 100px" class="y-grid">...</td>
casperfloor-wunderman commented 4 years ago

Nice hack using display:grid, how come this also works?

Casper Floor | Front-end Web Designer | Wunderman Thompson MSC | M +4530784157

From: Wilbert Heinen notifications@github.com Reply to: hteumeuleu/email-bugs reply@reply.github.com Date: Thursday, 18 June 2020 at 10.32 To: hteumeuleu/email-bugs email-bugs@noreply.github.com Cc: Casper Floor casper.floor@wundermanthompson.com, Comment comment@noreply.github.com Subject: Re: [hteumeuleu/email-bugs] Yahoo converts the height property to min-height (#9)

In case if it's not yet working for you could use the following yahoo specific class:

<style> .& .y-grid { display: grid } </style> ... ...

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/hteumeuleu/email-bugs/issues/9#issuecomment-645867788, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AJVZZHPDAWA3W7NBD4S2JWTRXHGJ7ANCNFSM4BW6TXEQ.

rhysdw commented 4 years ago

I'm seeing this fixed on IOS app but not yet on Android app or desktop webmail. I guess it may take a while to roll out the update. Really looking forward to this one going away as I had to jump through all sorts of hoops to work around this in some cases.

@wilbertheinen I just tried the display: grid fix but it forces the content of that cell to vertically align to the top for me. The workaround I found to align vertically middle was to add a margin:auto to the content. So for me I added:

.& .y-grid a{
margin:auto;
}

Thanks for this hack it really helps out!

wilbertheinen commented 4 years ago

That margin stuff fixed something for me I encountered in Yahoo in Chome 😅Thanks!

husseinalhammad commented 3 years ago

From what I see Yahoo converts height to min-height unless it has a value of auto. So height:100px is rewritten as min-height:100px, whereas height:auto is kept as is.

Gmail desktop basic HTML view seems to convert all instances of the height CSS property to min-height.

fddemora commented 9 months ago

As you can see, yahoo produces the same issue in 2024. This is resolved of course by using a max-width property. However, there is an alignment issue as white space takes up what would of been the image height without max-width. Thus, I had to use a new alignment value.

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.