search

hteumeuleu / email-bugs

Email quirks and bugs
539 stars 20 forks source link

Outlook.com and Outlook on iOS and Android ignores max-width on images #93

Open hteumeuleu opened 3 years ago

hteumeuleu commented 3 years ago

As reported several times over the past few weeks on the #emailgeeks slack, Outlook.com and the Outlook mobile apps have a new default style that resets the max-width property for images. Here's an example of the problematic rule seen on Outlook.com :

._3WlLk_4fUx7l0D6tu-MdWQ img {
    max-width: 100%!important;
}

A screenshot of developer tools showing the problematic code in Outlook.com

The solution would be to either revert your width and max-width (thus having width:150px; max-width:100%; instead of width:100%; max-width:150px; or setting the max-width to a non-image parent element.

This bug sounds very similar to #29.

nathankeenmelb commented 3 years ago

I'm getting the following rule which is even stronger (more specific), after wrapping the entire email in <div id="root">:

#root img {
    max-width: 100% !important;
}

It's also the case that if the image doesn't have height:auto in it, Outlook iOS (at the very least - could not replicate anything for Outlook Android or Outlook.com) will add that rule inline on the <img>, with an !important.

hteumeuleu commented 10 months ago

Following a conversation with Courtney F. on Slack, this bug no longer seems present in Outlook.com (webmail). But I still see the problem in Outlook iOS.