search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
16.92k stars 952 forks source link

Images on macOS Apple Mail go outside of mj-column #2251

Open adriaandotcom opened 3 years ago

adriaandotcom commented 3 years ago

Describe the bug Images on macOS Apple Mail go outside of the email body.

Reproduce

  1. Create a file with this MJML code: https://mjml.io/try-it-live/VzAebSxAFyY (images are inline here, but in real life they are included as attachments)
  2. Render it to HTML and send to macOS Apple Mail client
  3. Resize Apple Mail window to less wide than 820px (depending on image size or columns)
  4. You see the images show up outside of mj-column and the email body

Expected behavior The images should stay in their "containers" and not get out of mj-column.

MJML environment (please complete the following information):

Email sending environment(for rendering issues):

Affected email clients (for rendering issues):

Screenshots

✅ Wide (all good)

2021-05-07-screenshot-of-14h17@2x

🟥 Less wide (not good)

2021-05-07-screenshot-of-14h18 2@2x

.mjml and .eml file: issue-2251.zip

iRyusa commented 3 years ago

Can't seem to reproduce on my end are you sure you don't have any modification on the final HTML output ?

https://gfycat.com/fr/amusednaivedevilfish

iRyusa commented 3 years ago

Closing for now as I'm not able to reproduce your issue

chazepps commented 2 years ago

I have same issue. @iRyusa

@adriaanvanrossum How did you solve the problem?

In Apple's Mail app, there are situations where the location of the image is drawn incorrectly depending on the size of the window. I am attaching the image and source below.

I attached the image using the cid inside the email.

import type {
    MJMLJsonObject
} from 'mjml-core';

export const content: MJMLJsonObject = {
    tagName: 'mjml',
    children: [{
        tagName: 'mj-body',
        attributes: {},
        children: [{
            tagName: 'mj-section',
            attributes: {},
            children: [{
                tagName: 'mj-column',
                children: [{
                    tagName: 'mj-image',
                    attributes: {
                        'padding-right': '0px',
                        'padding-left': '0px',
                        src: 'cid:image1',
                        align: 'center',
                        width: '600px',
                        height: 'auto',
                        'padding-bottom': '0px',
                        'padding-top': '0px'
                    }
                }],
                attributes: {}
            }]
        }, {
            tagName: 'mj-section',
            attributes: {},
            children: [{
                tagName: 'mj-column',
                children: [{
                    tagName: 'mj-image',
                    attributes: {
                        'padding-right': '0px',
                        'padding-left': '0px',
                        src: 'cid:image2',
                        align: 'center',
                        width: '600px',
                        height: 'auto',
                        'padding-bottom': '0px',
                        'padding-top': '0px'
                    }
                }],
                attributes: {}
            }]
        }, {
            tagName: 'mj-section',
            attributes: {},
            children: [{
                tagName: 'mj-column',
                children: [{
                    tagName: 'mj-image',
                    attributes: {
                        'padding-right': '0px',
                        'padding-left': '0px',
                        src: 'https://9pl9.mjt.lu/tplimg/9pl9/b/xujmm/vg5z1.png',
                        align: 'center',
                        width: '600px',
                        height: 'auto',
                        'padding-bottom': '0px',
                        'padding-top': '0px'
                    }
                }],
                attributes: {}
            }]
        }, ]
    }],
    attributes: {}
};
import aws from 'aws-sdk';
import mjml2html from 'mjml';
import nodemailer from 'nodemailer';
import { content } from './content';

nodemailer
  .createTransport({
    SES: {
      ses: new aws.SES({
        apiVersion: '2010-12-01',
        credentials: new aws.SharedIniFileCredentials({
          profile: 'chaz-dev'
        }),
        region: 'us-west-1'
      }),
      aws
    }
  })
  .sendMail({
    from: '',
    to: '',
    subject: 'sample mail',
    text: 'test mail',
    html: mjml2html(content).html,
    attachments: [
      {
        filename: 'image1.jpg',
        path: '../../../resources/image1.jpg',
        cid: 'image1'
      },
      {
        filename: 'image2.png',
        path: '../../../resources/image2.png',
        cid: 'image2'
      }
    ]
  });

MJML environment (please complete the following information):

Email sending environment(for rendering issues):

Affected email clients (for rendering issues):

1 2 3
chazepps commented 2 years ago

.eml file attached! sample mail.zip

iRyusa commented 2 years ago

Without a MJML to reproduce it's too hard to help you here.

chazepps commented 2 years ago

@iRyusa Oh, I see! Sorry, I uploaded the mjml using json before. I attached the mjml below!

  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image align="center" height="auto" padding-bottom="0px" padding-left="0px" padding-right="0px" padding-top="0px" src="cid:image1" width="600px"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-image align="center" height="auto" padding-bottom="0px" padding-left="0px" padding-right="0px" padding-top="0px" src="cid:image2" width="600px"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-image align="center" height="auto" padding-bottom="0px" padding-left="0px" padding-right="0px" padding-top="0px" src="https://9pl9.mjt.lu/tplimg/9pl9/b/xujmm/vg5z1.png" width="600px"></mj-image>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Also, I attached a screenshot video. https://user-images.githubusercontent.com/1797699/186596625-863e30ed-643c-46c3-ae53-b6776b4e25c9.mov

The second video is proof that my macOS client is good at rendering other content! https://user-images.githubusercontent.com/1797699/186596669-b2c8dd4e-e7f1-4520-99d2-042f38219c16.mov

adriaandotcom commented 1 year ago

I have the same issue still:

https://user-images.githubusercontent.com/1079135/191257425-d571cc69-4e34-4311-aa44-6383a17088d6.mov

iRyusa commented 1 year ago

We need more info on that to reproduce. Try to send the email on putsmail.com to see if there's anything that could alter the html. Check if you reopen the email with same window height/width it behave the same or if it's only when resizing.

adriaandotcom commented 1 year ago

We need more info on that to reproduce. Try to send the email on putsmail.com to see if there's anything that could alter the html.

Litmus doesn't allow me to attach the images (which we do for privacy reasons), so I can only test with image URLs. And that seems to work fine via Litmus:

https://user-images.githubusercontent.com/1079135/191270075-0c6a372a-34c7-40c6-8fe4-b0000b5fc01d.mov

Check if you reopen the email with same window height/width it behave the same or if it's only when resizing.

Yes, it still happens:

image

There seems to some encoding of the dot in the non-litmus version:

<style type=3D"text/css">
@media only screen and (min-width:480px) {
        .mj-column-per-100 { width:100% !important; max-width: 100%; }
-.mj-column-per-34 { width:34% !important; max-width: 34%; }
-.mj-column-per-2 { width:2% !important; max-width: 2%; }
-.mj-column-per-64 { width:64% !important; max-width: 64%; }
-.mj-column-per-50 { width:50% !important; max-width: 50%; }
+=2Emj-column-per-34 { width:34% !important; max-width: 34%; }
+=2Emj-column-per-2 { width:2% !important; max-width: 2%; }
+=2Emj-column-per-64 { width:64% !important; max-width: 64%; }
+=2Emj-column-per-50 { width:50% !important; max-width: 50%; }
      }
</style>

=2E in version with the error (mailgun) . in litmus test

And of course the images changed:

<td style=3D"width:140px;">
-<img height=3D"auto" src=3D"https://assets.simpleanalytics.com/newsletter/g=
-eneral/logo-280px.png" style=3D"border:0;border-radius:0;display:block;outl=
-ine:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width=
-=3D"140">
+<img height=3D"auto" src=3D"cid:simple-analytics-logo.png" style=3D"border:=
+0;border-radius:0;display:block;outline:none;text-decoration:none;height:au=
+to;width:100%;font-size:13px;" width=3D"140">
</td>
Full HTML version of the email before it's being send ```html
The Privacy Newsletter
#008 - September 2022 - Unsubscribe
Privacy news that you shouldn’t miss. Short, sweet, and to the point.
Home Blog LinkedIn Twitter
This issue covers companies removing social logins from their websites, Instagram being fined over children's data privacy, and new privacy apps. If you happen to find good content we should add in the next issue, please email us.
What happened in the last few months

The Facebook button is disappearing from websites as consumers demand better privacy. Dell isn't alone. Other big brands, including Best Buy, Ford Motor, Pottery Barn, Nike, Patagonia, Match and Amazon's video-streaming service Twitch have removed the ability to sign on with Facebook. It's a marked departure from just a few years ago, when the Facebook login was plastered all over the internet, often alongside buttons that let you sign in with Google, Twitter or LinkedIn.
Some children reportedly upgraded to business accounts to access analytics tools such as profile visits, without realising this made more of their data public. Ireland's Data Protection Commissioner (DPC) said: "We adopted our final decision last Friday and it does contain a fine of €405m".
A new report examing the impact of Apple's privacy feature, App Tracking Transparency, indicates Apple's ads business appears to have financially benefitted as a result of the feature's launch.
Asked about state and local police accessing millions of people's geolocation data without warrants, an Arkansas prosecutor recently said Americans have given up any reasonable expectation of privacy when they use free phone apps—and that those who object belong to a "cult of privacy." Well, count me in. I am a proud member of the cult of privacy, and I want to bring you into the fold.
New privacy apps

Last Monday Lockdown Mode was released on iPhones and iPads running iOS 16 and iPadOS 16. This feature is a response to the Pegasus spyware, made it possible for hackers to access your information on Apple devices, resulting in a lawsuit from Apple. Apple help article.
OpenAudit is an open source platform to audit apps, services, and websites. They define audit as proving claims through references and independent verifications. As Simple Analytics is moving towards open-source, we are excited to work with OpenAudit to make our business more transparent.
PreCloud is a new app that encrypts your files before you upload them to any cloud service. This way, even if the cloud service is hacked, your data is safe. PreCloud is available for iOS and Android. Built by Penghui Li.
To make the most of the Internet, kids need to be prepared to make smart decisions. Be Internet Awesome teaches kids some fundamentals of digital citizenship and safety so they can explore the online world with confidence.
News from Simple Analytics

We wrote a blog about Vodafone & Deutsche Telekom who recently started trials with Trustpid to reintroduce persistent user tracking.
The first blog by our intern Carlo Cilento. 2022 has been one hot year in data protection so far, with supervisory authorities ruling against Google Analytics left and right. Carlo tried his best to update you on all the current events, but even for us, it's hard to keep track of it. Here is an overview of the lengthy data transfer affair starting from Schrems II in 2020 until today. This is meant to provide a better understanding of where we are now and maybe catch a little glimpse of where we're headed.
New features in Simple Analytics

Exciting news, our public script just got a massive update. We are now at v10. Most updates were in v9 including features to ignore metrics, add metadata to events and page views, overwrite path, and much more.
Simple Analytics developed a feature where you get alerts via email when an SSL certificate is about to expire. We usually send out two emails, one four days before the expiry date and another one day before the expiry date. That gives you and your team some time to renew the certificate before it's too late.

Do you like this newsletter? Invite others to theprivacynewsletter.com. This email is tracker-free and attaches all images for better privacy.
That's it for this issue!
Not a fan anymore? Unsubscribe here
```
iRyusa commented 1 year ago

So this is an issue with the ESP not MJML. We can't do anything about this, just open a ticket on their side ?

adriaandotcom commented 1 year ago

Yes, I believe you are right. Thanks for the tip about Litmus email test. And sorry for stealing your time away.

adriaandotcom commented 1 year ago

@chazepps did you use Mailgun as well?

Never mind, you're using AWS SES.

I do wonder if it fixes your problem when using Litmus as well.

iRyusa commented 1 year ago

Might be because of CID images too. It's weird that the last image on his email works fine, and both cid image behave like that.

chazepps commented 1 year ago

@adriaanvanrossum I think I found a way. Put this in the body and test it.

<mj-raw>
  <style>img {margin: 0;}</style>
</mj-raw>
adriaandotcom commented 1 year ago

@chazepps that indeed resolved my issue! Thanks for sharing.

iRyusa commented 1 year ago

Might need to add this to our skeleton if it fix the issue for everyone 🎉