search

hteumeuleu / email-bugs

Email quirks and bugs
537 stars 20 forks source link

Yahoo doesn't render attached background images #54

Open DarkDust opened 5 years ago

DarkDust commented 5 years ago

When sending a mail with images attached and referenced via the cid: URI scheme, normal images are displayed but background images are not, resulting in white background.

Workaround is to set a fallback background-color.

Outlook in turn renders the background color of BODY/100%-table-wrapper over the background image, so one strategy here is to assign the background-color in a STYLE tag in HEAD and hide that from Outlook using Conditional Comments.

WebDevJoshB commented 5 years ago

Do you have sample code so I can recreate the issue?

DarkDust commented 5 years ago

Here's a Litmus test of a minimal document as generated with Mail Designer 365 1.5 which shows the issue: https://litmus.com/pub/4332b11

The HTML content is below. Note the background="cid:392F8602-4596-40B6-B202-4C2767B18D15/page-bg" on body and the page-wrap table, that's what's not working. The ContentID is not strictly RFC-compliant (it lacks an @) but even changing the ContentID to be fully RFC-compliant doesn't make a difference. Office365 seems to have the same issue.

The background is displayed just fine if you refer hosted images instead, of course.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><!--Required for Yahoo Mail app--></head><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Generator" content="Created with TOWER ONE Mail Designer">
    <meta name="Viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css" id="Mail Designer General Style Sheet">
        a { word-break: break-word; }
        a img { border:none; }
        img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; }
        body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        .ExternalClass { width: 100%; }
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
        #page-wrap { margin: 0; padding: 0; width: 100% !important; line-height: 100% !important; }
        #outlook a { padding: 0; }
        .preheader { display:none !important; }
        a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
        .a5q { display: none !important; }
        .Apple-web-attachment { vertical-align: initial !important; }
        .Apple-edge-to-edge-visual-media { margin: initial !important; max-width: initial !important; width: 100%; }
        ul { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}
        ol { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}
    </style>
    <style type="text/css" id="Mail Designer Mobile Style Sheet">
        @media only screen and (max-width: 580px) {
            table.email-body-wrap {
                width: 375px!important;
            }
            td.page-bg-show-thru {
                display: none!important;
            }
            table.layout-block-wrapping-table {
                width: 375px!important;
            }
            table.mso-fixed-width-wrapping-table {
                width: 375px!important;
            }
            .layout-block-full-width {
                width: 375px!important;
            }
            table.layout-block-column, table.layout-block-padded-column {
                width: 100% !important;
            }
            table.layout-block-box-padding {
                width: 100% !important;
                padding: 5px!important;
            }
            table.layout-block-horizontal-spacer {
                display: none!important;
            }
            tr.layout-block-vertical-spacer {
               display: block!important;
               height: 8px!important;
            }
            td.container-padding {
                display: none!important;
            }

            table {
                min-width: initial!important;
            }
            td {
                min-width: initial!important;
            }

            .desktop-only { display: none!important; }
            .mobile-only { display: block!important; }

            .hide {
                max-height: none!important;
                display: block!important;
                overflow: visible!important;
            }
            .layout-block-table-desktop { display: none!important; }
            .layout-block-table-mobile {
                width: 100% !important;
                display: block!important;
            }
            .md-table-spacer { height: 50px; }

            #eqLayoutContainer {
            }
            table.no-padding-top { padding-top: 0!important; }
            table.no-padding-right { padding-right: 0!important; }
            table.no-padding-bottom { padding-bottom: 0!important; }
            table.no-padding-left { padding-left: 0!important; }

            .EQ-00 { width: 17px!important; }
            .EQ-01 { width: 17px!important; }
            .EQ-02 { width: 341px!important; }
        }
    </style>
    <!--[if gte mso 9]>
    <style type="text/css" id="Mail Designer Outlook Style Sheet">
        table.layout-block-horizontal-spacer {
            display: none !important;
        }
        table {
            border-collapse:collapse;
            mso-table-lspace:0pt;
            mso-table-rspace:0pt;
            mso-table-bspace:0pt;
            mso-table-tspace:0pt;
            mso-padding-alt:0;
            mso-table-top:0;
            mso-table-wrap:around;
        }
        td {
            border-collapse:collapse;
            mso-cellspacing:0;
        }
    </style>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:700,regular" rel="stylesheet" type="text/css" class="EQWebFont"><link href="https://fonts.googleapis.com/css?family=Roboto:700,regular" rel="stylesheet" type="text/css" class="EQWebFont"><style type="text/css" id="md365-mobile-modified">

</style></head>
<body style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " background="cid:392F8602-4596-40B6-B202-4C2767B18D15/page-bg"><!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="cid:392F8602-4596-40B6-B202-4C2767B18D15/page-bg" />
</v:background>
<![endif]-->  

<table width="100%" cellspacing="0" cellpadding="0" id="page-wrap" align="center" background="cid:392F8602-4596-40B6-B202-4C2767B18D15/page-bg">
<tbody><tr>
    <td>

<table class="email-body-wrap" width="700" cellspacing="0" cellpadding="0" id="email-body" align="center">
<tbody><tr>
    <td width="30" class="page-bg-show-thru">&nbsp;<!-- Left page bg show-thru --></td>
    <td width="640" id="page-body">

        <!-- Begin of layout container -->
        <div id="eqLayoutContainer">

            <div width="100%">
                <!--[if !mso 15]><!--><table width="640" cellspacing="0" cellpadding="0" class="layout-block-wrapping-table" style="mso-hide:all;">
                    <tbody><tr>
                        <td width="29" class="EQ-00">&nbsp;</td>
                        <td class="EQ-02" width="582">
                            <table cellspacing="0" cellpadding="0" align="left" class="layout-block-column">
                                <tbody><tr>
                                    <td width="562" valign="top" align="left" style="padding-left: 10px; padding-right: 10px;">
                                        <table cellspacing="0" cellpadding="0" class="layout-block-box-padding">
                                            <tbody><tr>
                                                <td align="left" class="layout-block-column" width="562">
                                                    <div  class="text" style="font-size: 16px; font-family: Helvetica, Arial, Roboto, 'Droid Sans', sans-serif; color: rgb(255, 255, 255); font-style: normal; font-weight: normal; line-height: 1.5; text-align: left; text-decoration: none;">
                                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody></table>
                                    </td>
                                </tr>
                            </tbody></table>
                        </td>
                        <td width="29" class="EQ-01">&nbsp;</td>
                    </tr>
                </tbody></table>
            <!--<![endif]--><!--[if gte mso 9]><div style="display:none;"><table cellspacing="0" cellpadding="0" class="layout-block-wrapping-table" width="640">
<tr><td width="29" class="layout-block-padding-left">&nbsp; </td><td width="582" class="layout-block-content-cell" valign="top" align="left"><table cellspacing="0" cellpadding="0" class="layout-block-box-padding">
<tr><td style="font-size:1px;" width="10">&nbsp; </td><td align="left" class="layout-block-column" width="562"><div class="text" style="font-size: 16px; font-family: Arial, sans-serif; color: #FFFFFF; font-style: normal; font-weight: normal; line-height: 150%; text-align: left; text-decoration: none;">
                                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                                                    </div></td><td style="font-size:1px;" width="10">&nbsp; </td>
</tr></table></td><td width="29" class="layout-block-padding-right">&nbsp; </td>
</tr></table></div><![endif]--></div>

        </div>
        <!-- End of layout container -->

    </td>
    <td width="30" class="page-bg-show-thru">&nbsp;<!-- Right page bg show-thru --></td>
</tr>
</tbody></table><!-- email-body -->

    </td>
</tr>
</tbody></table><!-- page-wrap -->

</body></html>