Gmail, Outlook.com and Office 365 removes styles that include special characters

[hteumeuleu]

Outlook.com and Office 365 remove styles that include special characters, like =, * or /. Here is an example that is correctly filtered. The following code…

<div style="background:#3cbc67; foo:bar; font-size:32px;">foo</div>

…is transformed by Outlook.com into :

<div style="background:#3cbc67; font-size:32px;">foo</div>

The following code, however…

<div style="background:#3cbc67; foo:=; font-size:32px;">foo</div>

…is transformed by Outlook.com into :

<div style="">foo</div>

I noted the following characters could cause this bug : =, *, /, $, %, \, &, @, ^, {, }, [, ], (, ), ?, |, <, >, ```. These look like characters usually found in regular expressions.

This means properties like filter: alpha(opacity=50); would make the whole inline style attribute they're in disappear.

Here is a test email used for this bug.

This bug was discussed on Litmus forums here.

[Flawwles]

Would width: 33.333% be an issue because of the . then?

[hteumeuleu]

This is an excellent question. And it turns out my initial test and reporting was partially incorrect. The following line with a backtick would make all the following lines break.

<div class="box" style="background:#3cbc67; foo:` ; font-size:32px;">`</div>

In fact, if I put that line first in my test, all of the other test lines would break. See screenshot below.

If I remove this line completely from my tests, here are the results.

So dots do not cause this bug, and using width: 33.333% is safe. Thanks a lot for asking.

[hteumeuleu]

Gmail also does this, wether it's in inline styles or in <style> tags. This happened before and still happens after the 2016 update of Gmail's parser. Here's the result of the previous test on Gmail: