Yahoo converts the height property to min-height #9

hteumeuleu · 2015-12-17T20:19:50Z

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 :

The text was updated successfully, but these errors were encountered:

hteumeuleu · 2015-12-29T15:22:25Z

Yahoo does the same thing.

hteumeuleu · 2016-10-06T13:53:25Z

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

bfulop · 2016-10-19T10:25:15Z

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 · 2017-12-13T21:15:52Z

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 · 2018-01-25T19:24:46Z

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 · 2018-03-22T14:57:52Z

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 · 2018-09-07T07:46:13Z

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 · 2018-12-07T17:10:10Z

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

casperfloor-wunderman · 2019-05-15T12:43:10Z

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 · 2019-05-28T12:52:44Z

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 · 2020-06-18T08:00:18Z

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!

wilbertheinen · 2020-06-18T08:32:15Z

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 · 2020-06-18T08:35:33Z

Nice hack using display:grid, how come this also works? Casper Floor | Front-end Web Designer | Wunderman Thompson MSC | M +4530784157 From: Wilbert Heinen <[email protected]> Reply to: hteumeuleu/email-bugs <[email protected]> Date: Thursday, 18 June 2020 at 10.32 To: hteumeuleu/email-bugs <[email protected]> Cc: Casper Floor <[email protected]>, Comment <[email protected]> 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 GitHub<#9 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AJVZZHPDAWA3W7NBD4S2JWTRXHGJ7ANCNFSM4BW6TXEQ>.

rhysdw · 2020-06-18T15:21:30Z

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 · 2020-06-19T09:12:49Z

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

husseinalhammad · 2021-10-22T09:26:17Z

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 · 2024-02-02T22:11:24Z

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.

hteumeuleu added the bug label Dec 17, 2015

hteumeuleu changed the title ~~Gmail converts the height property to min-height~~ Gmail and Yahoo convert the height property to min-height Dec 29, 2015

hteumeuleu changed the title ~~Gmail and Yahoo convert the height property to min-height~~ Yahoo converts the height property to min-height Jan 10, 2018

hteumeuleu changed the title ~~Yahoo converts the height property to min-height~~ Yahoo and Gmail Android converts the height property to min-height Mar 22, 2018

hteumeuleu changed the title ~~Yahoo and Gmail Android converts the height property to min-height~~ Yahoo converts the height property to min-height Sep 7, 2018

hteumeuleu added Yahoo Webmail, iOS and Android apps and removed bug labels Jul 10, 2019

hteumeuleu closed this as completed Jun 18, 2020

This comment was marked as spam.

Sign in to view

hteumeuleu reopened this Jun 18, 2020

Repository owner deleted a comment Oct 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Yahoo converts the height property to min-height #9

Yahoo converts the height property to min-height #9

hteumeuleu commented Dec 17, 2015

hteumeuleu commented Dec 29, 2015

hteumeuleu commented Oct 6, 2016

bfulop commented Oct 19, 2016 •

edited

Loading

jkupczak commented Dec 13, 2017 •

edited

Loading

ghost commented Jan 25, 2018

hteumeuleu commented Mar 22, 2018

hteumeuleu commented Sep 7, 2018

hteumeuleu commented Dec 7, 2018

casperfloor-wunderman commented May 15, 2019 •

edited

Loading

Haritsinh commented May 28, 2019

hteumeuleu commented Jun 18, 2020

This comment was marked as spam.

wilbertheinen commented Jun 18, 2020 •

edited

Loading

casperfloor-wunderman commented Jun 18, 2020 via email

rhysdw commented Jun 18, 2020

wilbertheinen commented Jun 19, 2020

husseinalhammad commented Oct 22, 2021 •

edited

Loading

fddemora commented Feb 2, 2024

Yahoo converts the height property to min-height #9

Yahoo converts the height property to min-height #9

Comments

hteumeuleu commented Dec 17, 2015

hteumeuleu commented Dec 29, 2015

hteumeuleu commented Oct 6, 2016

bfulop commented Oct 19, 2016 • edited Loading

jkupczak commented Dec 13, 2017 • edited Loading

ghost commented Jan 25, 2018

hteumeuleu commented Mar 22, 2018

hteumeuleu commented Sep 7, 2018

hteumeuleu commented Dec 7, 2018

casperfloor-wunderman commented May 15, 2019 • edited Loading

Haritsinh commented May 28, 2019

hteumeuleu commented Jun 18, 2020

This comment was marked as spam.

wilbertheinen commented Jun 18, 2020 • edited Loading

casperfloor-wunderman commented Jun 18, 2020 via email

rhysdw commented Jun 18, 2020

wilbertheinen commented Jun 19, 2020

husseinalhammad commented Oct 22, 2021 • edited Loading

fddemora commented Feb 2, 2024

bfulop commented Oct 19, 2016 •

edited

Loading

jkupczak commented Dec 13, 2017 •

edited

Loading

casperfloor-wunderman commented May 15, 2019 •

edited

Loading

wilbertheinen commented Jun 18, 2020 •

edited

Loading

husseinalhammad commented Oct 22, 2021 •

edited

Loading