Apple Mail iOS client shrinks email width and font sizes

[jinsley8]

Describe the Bug

Email templates created with React Email do not display properly in Apple Mail client on iOS.

It looks like it's reducing the width or adding a margin on the right side.

This occurs with the demo templates as well.

All the other emails in my inbox do not display like this. They are all full width and font sizes do not change.

I tested a Sendgrid dynamic template with a clone of my React Email template and it displays as expected.

React Email Template

Sendgrid Dynamic Template

Which package is affected (leave empty if unsure)

@react-email/components

Link to the code that reproduces this issue

https://gist.github.com/jinsley8/a77e145e527223339c4dd1db47742945

To Reproduce

Try sending any React Email template and view it on Apple Mail iOS on iPhone.

To test Sendgrid you'd have to create an account and setup a dynamic template but you can clearly see the React Template emails do not render the same as any other email in your inbox.

Details on Sendgrid templates:
https://docs.sendgrid.com/ui/sending-email/how-to-send-an-email-with-dynamic-templates
https://sendgrid.com/free-templates/

Expected Behavior

The email is full screen width and font sizes do not shrink.

What's your node version? (if relevant)

18.12.1

[jorrit91]

I'm having the exact same issue, but also #662, which makes the emails on iOS Mail and iOS Gmail pretty terrible.

[alex-streza]

I'm getting this same issue on Apple Mail and we can't push react-email to prod unless we get a fix 😢

[josephtannenbaum]

I think I was able to get around the issue by adding <meta name="x-apple-disable-message-reformatting" /> to the head tag. This setting is mentioned around the web (example) related to this problem.

[taphill]

I ran into this as well and adding the meta element that @josephtannenbaum suggested to the Head component fixed it for me.

[endymion1818]

@josephtannenbaum is evidently a genius.

[gabrielmfern]

@endymion1818 added the meta tag mentioned by @josephtannenbaum, and it has been released under @react-email/head@0.0.9 and it should be fixed in it. If anyone still experiences this using our Head component, please let me know and I'll reopen this issue.

[diamyndwallet]

I think I was able to get around the issue by adding <meta name="x-apple-disable-message-reformatting" /> to the head tag. This setting is mentioned around the web (example) related to this problem.

It worked for me too, thanks @josephtannenbaum