email-bugs icon indicating copy to clipboard operation
email-bugs copied to clipboard

Background-images aren't loaded in Office365

Open wilbertheinen opened this issue 5 years ago • 13 comments

Background-images aren't loaded in Office365 in Litmus and in my office365 as well. They only show when you click on “To always show content from this sender, click here”.

Because outlook.com using the same rendering engine I imagine that this could be the case for outlook.com as well, but I wasn't able to reproduce the same situation in outlook.com. Does anyone know how to change the preferences for downloading images in outlook.com/office365?

I tried background attribute, shorthand and longhand(?) css and it seems that these all get stripped.

wilbertheinen avatar Aug 03 '18 12:08 wilbertheinen

I would tend to believe that all accounts on both Outlook.com and Office 365 would behave the same (CSS and HTML wise). Do you have any example of code that causes you a problem? Maybe it's your account (or Litmus') that somehow got flagged and now longer shows background images by default.

hteumeuleu avatar Aug 04 '18 14:08 hteumeuleu

Indeed. Background-image property is stripped from the css and in shorthand as well.

Office 365 strips the background-image property from the css below and from shorthand as well:

background-color: transparent;
background-image: url('https://esp.e-village.nl/public/evillage/fde9cd1133/82/58/1920x540_8258f5b3fcfc76fd4c636b6980fa8efb.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

background: url('https://esp.e-village.nl/public/evillage/fde9cd1133/82/58/1920x540_8258f5b3fcfc76fd4c636b6980fa8efb.jpg') no-repeat center center/cover transparent;

They only show when “To always show content from this sender, click here”. is clicked.

wilbertheinen avatar Aug 06 '18 14:08 wilbertheinen

Did you try to send your email with another neutral service, like Putsmail, for example?

hteumeuleu avatar Aug 14 '18 09:08 hteumeuleu

We could start enforce the rule that all issues without a code sample will be instantly closed. There are presets that can be set, you probably saw those on large OS projects, those that contain checkboxes

revelt avatar Aug 14 '18 09:08 revelt

And this issue doesn't seem like a rendering bug, it's behaviour of an ESP! As OP says "They only show ...", so they do show up after turning them on... It's not a rendering bug!

revelt avatar Aug 14 '18 09:08 revelt

Maybe it isn't indeed a rendering bug in the HTML, but because this issue wasn't the case a couple of weeks ago I think it has something to do with an update of the rendering engine in Office365 (and probably outlook.com as well). I tried putsmail and builder, but from both the images and bg images are loaded on open, because I clicked on "To always show content from this sender, click here”. Let me check if I can replicate it.

wilbertheinen avatar Aug 15 '18 09:08 wilbertheinen

I have sent an email to my outlook.com and office365 inbox with a different from address. Outlook.com seem to show images on default. Office365 doesn't. It gives 2 options:

  1. To protect your privacy, certain content in this message was blocked. To make these functions available again, click here.
  2. To always display content from this sender, click here.

When I click on option 1 the images are loaded, but the background/background-image css properties are still stripped from the processed html.

<div class="x_no-bg-image x_height-auto" style="height:403px; text-align:left; vertical-align:middle">

When I click on option 2 the background css properties are in the processed html and are visible:

<div class="x_no-bg-image x_height-auto" style="height:403px; text-align:left; vertical-align:middle; background:url('https://litmus-builder.s3.amazonaws.com/1533912052934') no-repeat center center/100% 100% #A7DCAA">

wilbertheinen avatar Aug 15 '18 10:08 wilbertheinen

I take my words back, it seems like a rendering bug! I'm wondering, is it still the same behaviour on td background too.

revelt avatar Aug 15 '18 10:08 revelt

No problem! Seems to be the case as well for background attr on td:

<td data-imagetype="External" blockedimagesrc="https://nieuwsbrief.staatsbosbeheer.nl/public/Staatsbosbeheer/fe0d42a6dcde19e1952ccb088fe152ed/header-krokus-2.jpg" class="x_background-hero" bgcolor="#7d0a5a" valign="top" style="background-size:cover; background-repeat:repeat-x">

wilbertheinen avatar Aug 15 '18 10:08 wilbertheinen

Confirmed, I just tested on Outlook 365 and background on td, behaviour exactly as described above.

revelt avatar Aug 15 '18 10:08 revelt

This affecting emails in OWA image how is Microsoft outlook web making these changes? its works on the desktop client, just not the browser rendering.

xxcbzxx avatar Sep 23 '21 07:09 xxcbzxx

Does anyone have a code sample to see if we can diagnose a specific code issue and also a possible workaround?

JayOram avatar Oct 06 '21 15:10 JayOram

Here’s an example I'm currently working on. I'm on a Microsoft 365 Apps for business account on Outlook Version 2109 Build 16.0.14430.20154 (32 bits on Windows 10.0.19043). I'm on dark mode by default (both on Windows and Outlook).

What happens with this email is that when I preview it, none of the VML images show (or sometimes only the only on the second example, which is a <v:image> and not a <v:fill>). But if I double click to open the email in a new window, all images will show at once (both in the original preview pane and in the new window). Same if I hit the "Light mode" button.

hteumeuleu avatar Oct 07 '21 07:10 hteumeuleu