Gmail rolling out changes that strip CSS with background images
Update: Mark Robbins has posted a bug report on the Google Issue Tracker. (Make sure to click on +1 to let Google know you’re impacted too).
Update 2: Google has acknowledged the issue and is rolling out a fix!
Gmail appears to be in the middle of rolling out changes that strip all embedded or inline CSS in certain Webmail accounts if it contains any background image CSS code.
Currently only a handful of Gmail Webmail accounts are seeing this issue so its unclear if Gmail will continue to roll out this change or they will roll it back once they realize the gravity of this issue. Kudos to Alice Li from Zillow as she was the first to document this issue.
Background
Beginning over the past several days, there have been reports of Gmail randomly stripping CSS styles. This is not surprising as Gmail is aggressive on stripping CSS when it encounters errant CSS styles such as a typo. However today, I noticed that Gmail is stripping styles from the same email but only in certain Gmail Webmail accounts which lead me to pop into the Email Geeks Slack to see if other email developers are encountering this issue.
We were able to confirm that this problem was happening in some Gmail accounts and Alice discovered that the culprit was the background image CSS.
Background Image CSS issue
What is happening is that if you have any background image CSS that contains a URL, a segment of Gmail Webmail accounts will strip ALL of the CSS with it. (Google tends to release Gmail updates progressively across their accounts and not all at once). This issue does not seem to manifest in the Gmail iOS or Android Apps.
Say you have the following in your inline style containing a background image:
<td width="500" style="font-face:Arial; padding:20px; background-image: url('https://acme.com/image.jpg');background-size:cover;">When rendered in the affected Gmail accounts the entire inline CSS styles for that element will be removed:
<td width="500">Shorthand background CSS
This issue also affects shorthand background CSS that includes background images.
background: #ffffff url("https://acme.com/image.jpg") no-repeat;Embedded CSS
Embedded CSS in the <head> are also affected. Gmail will strip the complete <style> block that contains a background image with a URL. For example the complete block below would be stripped:
<style>
.col {
font-face:Arial;
padding: 20px;
background: #ffffff url("https://acme.com/image.jpg") no-repeat;
}
.container {
padding: 20px 30px;
background-color: #eeeeee;
}
</style>Solutions
Use background attribute
As suggested by Alice, one of the quickest solution is to use the HTML background attribute instead (this attribute is only legal on table elements), since Gmail is only targeting background image CSS with URLs:
<td width="500" background="https://acme.com/image.jpg" style="font-face:Arial; padding:20px;background-size:cover;">This is “hackish” (what isn’t in the email realm?) since we’re mixing styles and attributes and but the browser (for the most part) will treat the background attribute as if a background-image CSS was provided and CSS properties such as “background-size” will work as well.
As always, make sure to test your changes to make sure that your emails still render well on other email clients.
What about GANGA?
The Gmail App for Non Google Accounts as email geeks affectionally call GANGA, is a much less popular variant of Gmail that does not support the HTML background attribute but instead requires background images to be declared in CSS shorthand.
If you want to support GANGA along with the new Gmail changes fellow developers have provided some options:
- Jay Oram suggests using a combination of embedded styles (using classes), and background attribute to target the problematic Gmail change and inline styles to target GANGA.
- Nicole Merlin addressed this by using two containers, using the background attribute on the
td(table cell) and an inner (or outer) container with inline background image CSS targeting GANGA.
Split up your style blocks
When Gmail encounters something it doesn’t like in embedded styles, it removes the style block the problematic CSS is in. However Gmail won’t remove other style blocks in your HTML. So if you absolutely need to have background image CSS in your embedded styles you can group them in their own style block:
<style>
.col {
background-image: url("https://acme.com/image.jpg");
}
</style>
<style>
.col {
font-face:Arial;
padding: 20px;
background-color: #ffffff;
background-repeat: no-repeat;
}
.container {
padding: 20px 30px;
background-color: #eeeeee;
}
</style>Affected Browsers
There is some discussion that the issue appears to be tied to certain Chrome versions, but from my tests this seems to be specific to specific Gmail Webmail accounts and not the browser version itself.
I will update this article as I learn more.
|
this was helpful – at least I know what happened to my mailchimp backgrounds. Please keep us posted if you learn more.
Thank you Justin for highlighting this issue and Alice Li for diagnosing it.
Quite interesting how Gmail rolls out these updates without any prior notice. It affects businesses on a large scale.
Regarding GANGA, the HTML background attribute is supported on its own. The issue is when you need to use background-size along with it. That property is only supported in GANGA when used in CSS shorthand. If you don’t need to use it, you can safely use the background attribute.