mjml

mjml copied to clipboard

This would have been a pr but I couldn't get my changes in packages/mj-section to actually do anything in the final template. Is there a trick to modifying these files? I'm also day 3 into my mjml journey, so I'm posting as an issue 💯 :

The Windows 10 mail client doesn't support background images, even with the outlook specific vml hack we've had to use for backgrounds in outlook.

Here is the litmus test with a solid background and with a background image (breaking): https://litmus.com/builder/2cc664b

From the announcement when Litmus added Windows 10 to their preview:

Background images are, as in Outlook, not supported. The go-to solution to combat this issue in Outlook 2007/10/13 uses a combination of VML and HTML to enable background images. However, this doesn’t work in Windows 10 Mail. This should act as a reminder to not use background images to visualize important messaging in your email. However, they can be used as an added bonus, or finishing touch to email designs. If you do use background images in your emails, be sure to thoroughly test and have fallbacks in place, such as a background color, for when background images aren’t supported.

• sauce: https://litmus.com/blog/windows-10-mail-email-rendering-support

Reproduction Steps:

Not working

<mj-section
  background-color="#5784cd"
  background-url="http://i.imgur.com/evIcJu4.jpg">
  <mj-column>
    <mj-text
      align="center"
      font-size="24"
      color="white"
      font-family="Helvetica Neue"
      font-weight="200"
      padding-bottom="20px">
      With background image
    </mj-text>
  </mj-column>
</mj-section>

Works correctly with no background image

<mj-section
  background-color="#5784cd">
  <mj-column>
    <mj-text
      align="center"
      font-size="24"
      color="white"
      font-family="Helvetica Neue"
      font-weight="200"
      padding-bottom="20px">
      With background color only
    </mj-text>
  </mj-column>
</mj-section>

Proposed Solution

Windows 10 doesn't support vml anymore (fuck!) so I think the best solution is to whitelist this version from the vml conditional and add the background color as a fallback to the table that wraps the whole mj-section when the background-url is present:

<!--[if mso | IE]>
  <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;background:#5784cd;"> <- Add background color for fallback to show to all outlook clients. Background is added on top of this if supported.
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;background:#5784cd url(http://i.imgur.com/evIcJu4.jpg) top center / auto repeat;">
  
  <!--[if lte mso 15 | IE]> <- all MSO up to newest windows mail app
  
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600pxpx;">
    <v:fill origin="0.5, 0" position="0.5,0" type="tile" src="http://i.imgur.com/evIcJu4.jpg" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->

The litmus test for this solution: https://litmus.com/builder/44a3dab

Expected behavior:

Mj-section should display a background image in clients that support it and fallback to a solid color for those that don't.

Observed behavior:

Background image does not load and displays a broken image. If the css prop is not supported, it ignores the whole thing. So when mjml adds background:#5784cd url(http://i.imgur.com/evIcJu4.jpg) top center / auto repeat; outlook 16/win 10 ignores the background prop. Adding the fallback directly on the table or div breaks the background image and only displays ~20px at the bottom. The solution above seems to fix the issue and not break any other clients.

MJML version:

3.0.1

Email clients the bug is seen on:

Windows 10 & outlook 2016

I wasn't able to find where the original

<!--[if mso | IE]>
  <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;background:#5784cd;"> <- Add background color for fallback to show to all outlook clients. Background is added on top of this if supported.
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->

is being created but this is my whole template:

<mjml>
  <mj-body>
    <mj-container background-color="#ffffff">
      <!-- Header -->
      <mj-navbar background-color="#222426" padding="0">
        <mj-group>
          <mj-column>
            <!-- Logo -->
            <mj-spacer height="5px" />
            <mj-image
              width="120px"
              src="https://d56wl2mg5ninf.cloudfront.net/images/logo/logo-dark.8b6bebdba.jpg"
              href="https://www.theinformation.com"
              align="left"></mj-image>
          </mj-column>
          <mj-column>
            <mj-inline-links
              base-url="https://mjml.io"
              align="right">
              <mj-link
                href="/gettings-started-onboard"
                color="#ffffff"
                font-weight="100"
                font-size="10px">Twitter</mj-link>
              <mj-link
                href="/try-it-live"
                color="#ffffff"
                font-weight="100"
                font-size="10px">Facebook</mj-link>
            </mj-inline-links>
          </mj-column>
        </mj-group>
      </mj-navbar>
      
      <!-- Banners -->
      <mj-section
        background-color="#5784cd"
        background-url="http://i.imgur.com/evIcJu4.jpg">
        <mj-column>
          <mj-text
            align="center"
            font-size="24"
            color="white"
            font-family="Helvetica Neue"
            font-weight="200"
            padding-bottom="20px">
            With background image
          </mj-text>
        </mj-column>
      </mj-section>   

      <mj-section
        background-color="#5784cd">
        <mj-column>
          <mj-text
            align="center"
            font-size="24"
            color="white"
            font-family="Helvetica Neue"
            font-weight="200"
            padding-bottom="20px">
            With background color only
          </mj-text>
        </mj-column>
      </mj-section>


      <!-- Social -->
      <mj-section background-color="#f3f3f3">
        <mj-column>
          <mj-text align="center">Stay in touch!</mj-text>
            <mj-social
                mode="horizontal"
                display="twitter facebook" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Hi !

Looks like it already works in Outlook 2016 from your link, but no preview available in Windows 10 Mail yet on Litmus. I'll take a look on that tomorow

btw: nice issue with a lot of resource 👍

Outlook 16 didnt break but the comment targets both versions, so you'd lose support for outlook 16 when fixing windows 10.

Litmus does have preview for windows 10, but it looks they disabled the preview for it within the last hour. (https://status.litmus.com/ maintenance?)

Here's a screenshot for windows 10 I took but didn't include in the issue.

That might be a solution too http://www.emailmonks.com/blog/email-coding/background-image-supports-windows-10-mail-app/ but it need fixed width/height

The strange thing is that the mj-hero is working in Windows 10 mail. https://mjml.io/try-it-live/components/hero

@Charpben did you check that in litmus? Maybe the hero markup has the fixes I outlined.

No @mklemme . I tried some tests directly in the windows 10 Mail app.

And with just this code, I have an image showing in W10 mail:

<!--[if mso | IE]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" croptop="0" cropbottom="0" style="width:510pt;height:263.25pt;position:absolute;top:0;mso-position-horizontal:center;border:0;z-index:-3;" src="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" /> <![endif]-->

The code generated by the mj-hero.

mj-hero doesn't rely on the same VML used in mj-section so that could explain it

@Charpben I've tried with your code, and can't get it to work, even with fixed wodth and height.

mj-hero outputs the background image on td element while the section background-url outputs the backgorund-image on table tag, i guess that might be the issue and it still not been addressed see below

<mjml> <mj-body> <mj-hero mode="fluid-height" background-width="600px" background-height="100px" background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-color="#2a3448" padding="20px 0px" width="100%"> <!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component --> <mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900"> this is hero </mj-text> </mj-hero> <mj-section background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg"> <mj-column> <mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900"> this is section </mj-text> </mj-column> </mj-section> </mj-body> </mjml>

and this is the output in the html for hero <td style="width:0.01%;padding-bottom:17%;mso-padding-bottom-alt:0;" /> <td background="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" style="background:#2a3448 url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:20px 0px;vertical-align:top;">

and for section <div style="background:url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) top center / auto repeat;Margin:0px auto;max-width:600px;"> <div style="line-height:0;font-size:0;"> <table align="center" background="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) top center / auto repeat;width:100%;"> below is screenshot from windows 10 outlook 2016

and here is the screenshot of gmail

It’s not the same technique behind the scene so that’s normal

On 29 Mar 2019, at 13:49, Tajwebdeveloper [email protected] wrote:

mj-hero outputs the background image on td element while the section background-url outputs the backgorund-image on table tag, i guess that might be the issue and it still not been addressed see below

this is hero this is section

and this is the output in the html for hero

and for section

below is screenshot from windows 10 outlook 2016

and here is the screenshot of gmail

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

It’s not the same technique behind the scene so that’s normal … On 29 Mar 2019, at 13:49, Tajwebdeveloper @.***> wrote: mj-hero outputs the background image on td element while the section background-url outputs the backgorund-image on table tag, i guess that might be the issue and it still not been addressed see below this is hero this is section and this is the output in the html for hero

and for section

below is screenshot from windows 10 outlook 2016 and here is the screenshot of gmail — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

so what is the solution ?

As mentioned in the beginning of the issue, we should just drop the support on Outlook 16 ( @mklemme solution ) and add vml conditional inside mj-section.