1

I discovered a problem on the Mail app available in Windows 10, in particular, I developed a little app in NodeJS that send the email with nodemail package, this email have in the header the following layout:

<div id="header" style="background: linear-gradient(to right,#00c7ce,#1a5cce 85%); border-bottom: 4px solid #1a5cce;
                height: 45px; padding: 10px 15px;">
    <strong id="logo" style="color: white; font-size: 20px;
            text-shadow: 1px 1px 1px #8F8888; margin-top: 10px; display: inline-block">
        <%= process.env.COMPANY_NAME %></strong>
</div>

the email is perfectly displayed in GMAIL:

enter image description here

but in Windows 10 Mail the gradient is not rendered:

enter image description here

Is this a bug of Windows 10 Mail app? Because in other email software I got no problem.

teres
  • 395
  • 1
  • 2
  • 9

1 Answers1

2

This is not a bug in the Windows 10 Mail app, per se. It is a result of the fact that Gmail and Windows 10 Mail use different rendering engines. Consider how CSS rules get applied differently by different web browsers. The same is true of email clients, except that the web standards set forth by W3C are often completely ignored by email clients, or they may choose to only obey a very small sub-set of the standards.

Trying to use modern CSS features in email clients is going to produce a wide range of effects that are not always predictable without testing the resulting email in many different environments.

You may be able to get the desired gradient effect in your screenshot by using a background image rather than a CSS gradient, but this can cause it's own set of issues (such as whether a particular email client renders it at all, whether text is rendered on top of it properly, etc).

Here are some links where you can learn more about this complicated issue:

ty2k
  • 761
  • 5
  • 12
  • Ok, so essentially you suggested me these alternatives: 1. add a gradient image (which can have issue about resolution) 2. use a simple image as background – teres Mar 08 '19 at 11:36
  • 1
    Hi @teres, yes those might be possible solutions for you. There are so many ways to go about this issue, but the way I would personally deal with it would be to avoid setting text over a gradient background at all. I know this is not always possible, and you have stakeholders who may demand you implement a particular design for branding/marketing reasons. But at that point we are out of the realm of CSS and into the thornier issue of dealing with clients/stakeholders. – ty2k Mar 08 '19 at 17:52