Windows 8 mail app and the background-size CSS property

0
windows8mailapp

Recently I discovered the Windows 8 mail app (Touch/Metro) not playing nice with the background-size CSS property. This property is often used when you need scale down an image on the fly, one reason for doing this is for optimising image assets for high resolution devices. The Windows 8 mail app supports CSS3 and hence this can be done. However background-size doesn’t actually work in some cases and its all dependant on the way you write background CSS properties. Find out more on how to avoid this quirk below!

What’s that in the background?

See what I did there?! Some essential background information on the Windows 8 mail app, its an official Microsoft app written in C#, but its also partly a web app using HTML5, CSS and JavaScript, this makes it quite easy to examine what’s going on in the mail app itself.

The Windows 8 mail app renders with the Internet Explorer engine, but before you start cursing Microsoft, let me reassure you the mail app in Windows 8 is rather good. Its simplistic and has a very clean interface. In terms of HTML/CSS standards it does rather well, it has decent CSS3 support and is about on par with webkit based email clients. The downside to the mail app however is that like other Internet Explorer based email clients such as Windows Phone, it doesn’t render with the highest capable standards by default, therefore you must force IE edge mode, which is easily done.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

How you use background-size is quite important with the mail app

Never before have I ever come across the behaviour I’m about to explain below, but depending on how you write your background properties, background-size can and will fail in the Windows 8 mail app in some cases.

I have observed this behavior on Windows 8/8.1 as well as the recently released Windows 10 Technical Preview. The latest version of the mail app at the time of writing this is, 17.5.9841.20619 which is included in the Technical preview. You can view the version string via the About menu in the app, or if you analyse the source code of email after its been processed by the mail app you’ll find this meta tag:

<meta name="generator" content="Windows Mail 17.5.9841.20619">

The version string will differ depending on the version of the app

In the examples below, I’m going to create a situation where I want to scale down a 500px x 334px image to 250px x 167px in order to optimise it for high resolution devices. I’ll do this by putting a background image on the table cell and scaling it. When doing this for real, you would wrap the CSS below in a high resolution media query due to background-size being a CSS3 only property.

A full test example can be found as a Gist on GitHub here

<td class="image">
    <img src="image-1x.jpg" alt="An image" style="display:block;" width="250" height="167" />
</td>

Test #1: Using background-image and background-size

    td[class="image"] { 
       width:250px;
       height:167px;
       background-image:url(image-2x.jpg); 
       background-repeat:no-repeat; 
       background-size:250px auto; 
    }

Result: FAIL

Test #2: Using background (not the background-image property) with background-size

    td[class="image"] {
       width:250px;
       height:167px;
       background:url(image-2x.jpg); 
       background-repeat:no-repeat; 
       background-size:250px auto; 
    }

Result: FAIL

Test #3: Using background shorthand

    td[class="image"] { 
       width:250px;
       height:167px;
       background:url(image-2x.jpg) 0 0 / 250px auto no-repeat;
    }

Result: WORKS!

Out of all of the tests, only the third test works in the Windows 8 mail app. What’s strange is all of the examples are perfectly valid. Every other CSS3 client renders all three correctly, what’s even more stranger is even Internet Explorer (in the browser) does too, and that’s the same rendering engine use by the mail app, yet it doesn’t work here.

Here’s a few other tests that also didn’t work:

  • Add !important to the background-size property
  • Using a pixel height value rather than auto
  • Doing a rain dance

Despite these additional tests nothing worked, yes even the third one!

Why does this happen?

I’m still working on writing up more conclusive evidence on why this is the case, but from preliminary tests I think the mail app strips background-size when it is written on its own.

Here’s a snippet of the source code of the test email after being sent to the Windows 8 mail app.

windows8-mailapp-background-size-small

Click on the image for a larger view

The background-size property is completely missing in the first two examples, but on the third example the background shorthand has remained untouched and is exactly how it was in the original template.

A developing story… I will update this write up in due course when I have found out more information.

In the meantime, have you noticed anything strange about the Windows 8 mail app? Let me know in the comments!

Share This: