Images on macOS Apple Mail go outside of mj-column

[adriaandotcom]

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):

• OS: macOS
• MJML Version: 4.7.1
• MJML tool used: Custom Node.js App with the mjml package

Email sending environment(for rendering issues):

• Mailgun

Affected email clients (for rendering issues):

• Email Client: Apple Mail on Mac
• OS: Mac

Screenshots

✅ Wide (all good)

🟥 Less wide (not good)

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

[iRyusa]

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]

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

[chazepps]

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):

• OS: macOS 13 and Ubuntu
• MJML Version: 4.13.0

Email sending environment(for rendering issues):

• Platform used to send the email: AWS SES

Affected email clients (for rendering issues):

• Email Client: macOS Mail App
• OS: macOS

[chazepps]

.eml file attached! sample mail.zip

[iRyusa]

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

[chazepps]

@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]

I have the same issue still:

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

[iRyusa]

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]

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:

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

Companies like Dell have been removing social logins from their websites www.cnbc.com 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. Instagram fined €405m over children's data privacy www.bbc.com 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". One year later, Apple's privacy changes helped boost its own ads business, report finds techcrunch.com 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. If caring about your digital privacy makes me a cult member, sign me up slate.com 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

iOS 16 Lockdown Mode released 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 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: Encrypt files 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. Internet Awesome for kids 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

Vodafone & Deutsche Telekom to introduce persistent user tracking We wrote a blog about Vodafone & Deutsche Telekom who recently started trials with Trustpid to reintroduce persistent user tracking. The Complete Overview: From 101 NOYB complaints to banning Google Analytics 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

Many new features in our public script 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. SSL expiry alerts 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]

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]

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

[adriaandotcom]

@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]

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]

@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]

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

[iRyusa]

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