Outlook.com removes `<style>` tags in the `<head>`

hteumeuleu commented 5 months ago

Last Friday, June 21st, was reported on Slack that Outlook.com (desktop webmail) was removing <style> tags. This seems to affect users worldwide but with a slow rollout. (I only started seeing this on Monday, 24th.) We don't know if this is a temporary issue or permanent feature.

In the meantime, it’s been found that only <style> tags in the <head> of an email were removed. So we can include <style> tags in the <body> and they'll work. If you need to go that route, make sure to duplicate your <style> tags as Gmail doesn't support them in the <body>.

You can use Can I email’s <style> tag test to see how support is at the moment: https://www.caniemail.com/tests/html-style.html

A screenshot of the test email in Outlook.com. Only style tags inside the body show with a green background.

JayOram commented 5 months ago

Could you do the 'hack' which uses inside the body tag, so the styles work in Gmail?

e.g.

<html>
<body>
  <head>
    <style>
     ...
    </style>
  </head>
</body>
</html>

NivenRanchhod commented 5 months ago

@JayOram I thought the same and ran a test. That also works to remedy the issue.

Dalinex commented 5 months ago

Unfortunately for Yahoo that is not a solution. It has to stay in . The rest of style can be in and looking at tests on Gmail there is no problem, at least I don't see it on devices or in EOA.

NivenRanchhod commented 5 months ago

@Dalinex Which solution isn't working for you? Remi's shifting to the body tag or the wrapping in head tags and shifting to the body? What issues are you seeing in Yahoo and which device? I ran Remi's test in Litmus and it looks fine to me on webmail, but maybe that isn't the right scenario for all tests.

Dalinex commented 5 months ago

This specific style is for Yahoo - and it is only for iPhone 13 - iOS 17.5.1 - when you have .png, in dark mode, Yahoo adds white background. If I move that style in than .png gets white background again. If it stays after than it looses white background. I tested on Email on Acid and other devices and desktops, are working fine.

code in body yahoo

NivenRanchhod commented 5 months ago

@Dalinex What happens when you double up as Remi mentions?

Dalinex commented 5 months ago

I haven't tested that option since I saw that Yahoo style is holding OK in iPhone - iOS combo. But, if I put style after body - everything is working fine - all over all devices. Doubling would double the code and my emails are sometimes huge due to multiple tables and columns.

But thing is that for now Outlook emails are ok in inbox - that is why I asked if Europe is showing this bug.

NivenRanchhod commented 5 months ago

Fair enough. Litmus doesn't have Yahoo mobile app tests, so it would be great if you can test in EoA and report back on this ticket, so we know if the workarounds mentioned, work.

I'm in the UK and I'm seeing the bug. Litmus is also showing the issue in their screenshots for Office 365 and Outlook.com.

Dalinex commented 5 months ago

Email on Acid doesn't have mobile preview for Yahoo. The tests are done on real devices. This is screenshot of iPhone and Samsung - both combo. iPhone13_iOS17_DM_Yahoo Samsung_A40_V11_DM_Yahoo

I still cant see any problems on EOA screenshots for any Outlook - so kind on stand by.

wilbertheinen commented 5 months ago

Outlook for Mac (16.85.1 (24051916)), which is using the same render engine as outlook.com, seems to still render correctly

digicase commented 5 months ago

@wilbertheinen I can confirm Outlook for Mac Version 16.86.2 (24062313) is also not exhibiting the issue. Outlook for web does.

I duplicated the <style> elements into the <body> tag and that fixed Outlook for web.

Hopefully Microsoft revert their changes. HTML code for email apps is bad enough without having to duplicate parts of it!

iRyusa commented 4 months ago

Is there any potential side effect on any other client when duplicating styles block in body ?

Edit: I've tested a bit with few templates on MJML with big style block and couldn't find any on Email On Acid yet.

thelefflaNA commented 4 months ago

I can confirm on my end that I was able to repo this issue this week, but today it seems to have reverted back, anyone no longer seeing the issue? Monday image (5)