Apple Mail in iOS 10 beta doesn't always auto-scale non responsive emails

hteumeuleu commented 8 years ago

In the first beta of iOS 10, Apple Mail has a new mechanism that doesn't always auto-scale non responsive emails. This results in huge emails that needs to be scrolled horizontally and vertically, and what I think is a poorer experience. But this mechanism doesn't seem consistent. Sometimes, non responsive emails will auto-scale. And other times, they won't. The aim of this issue is to list examples of emails that don't auto-scale, and try to find fixes and understand what causes the non auto-scale in iOS 10.

Here are two examples reported on Twitter by Alex Williams and Eric Lepetit.

hteumeuleu commented 8 years ago

This email from Orchestre National de Lille doesn't auto-scale on iOS 10. Here are two screenshots (iOS 9 on the left, iOS 10 on the right).

Fix : In the HTML received, there is a main <table> and two <p> outside of it. If we insert the two <p> in new rows of the main <table> (and thus have only one table for the whole email), iOS 10 auto-scale the email correctly. Here is a screenshot of this email fixed for iOS 10 :

hteumeuleu commented 8 years ago

This email from La Poste doesn't auto-scale on iOS 10. Here is the code from that email. Here are two screenshots (iOS 9 on the left, iOS 10 on the right).

Fix : Remove the TABLE-LAYOUT: fixed on the main table, and the email will auto-scale correctly. Here is a screenshot of this email fixed for iOS 10 :

hteumeuleu commented 8 years ago

This email from LEGO doesn't auto-scale on iOS 10. Here is the code from that email. Here are two screenshots (iOS 9 on the left, iOS 10 on the right).

Fix : Remove the table-layout: fixed; on the main table, and the email will auto-scale correctly. Here is a screenshot of this email fixed for iOS 10 :

hteumeuleu commented 8 years ago

This email from Service-public.fr doesn't auto-scale on iOS 10. The email also appears severly broken on iOS 10. Here is the code from that email. Here are two screenshots (iOS 9 on the left, iOS 10 on the right).

Fix : Wrap all the content inside a single <table>, and the email will auto-scale correctly. Here is a screenshot of this email fixed for iOS 10 :

ericlepetit commented 8 years ago

This email from Bobbi Brown doesn't auto-scale on iOS 10 beta. Here are two screenshots (iOS 9 on the left, iOS 10 beta on the right).

Here is the code for that email

Fix: Removing padding:0 from <body style="margin:0;padding:0;"> and the email will auto-scale on iOS 10 beta

hteumeuleu commented 8 years ago

iOS 10 beta 2 has been released, and there seems to have been a few changes. The following emails seems to scale more properly (though the Service Public one still appears broken).

iOS 9	iOS 10 beta 1	iOS 10 beta 2

The following emails still don't auto-scale.

iOS 9	iOS 10 beta 1	iOS 10 beta 2

hteumeuleu commented 8 years ago

Auto-scaling seems fixed in iOS 10 beta 3 for the emails that still didn't autoscale in beta 2.

iOS 9	iOS 10 beta 2	iOS 10 beta 3

There are still render differences (like white cells appearing on the LEGO email). But overall the auto-scaling behavior seems back to normal.

ericlepetit commented 8 years ago

@hteumeuleu I haven't seen any issues on beta 7. Have you?

hteumeuleu commented 8 years ago

Nope. Everything seems okay since beta 3.

hteumeuleu commented 7 years ago

This email from Boulanger doesn't auto-scale on iOS 10 beta 8. Here is the code from that email. Here are two screenshots.

iOS 9.3	iOS 10 beta 8

It looks like the problem comes from the following lines:

<tr class="dn">
    <td width="640" height="1">
        <a href="#" style="display:block;min-height:1px;max-height:1px;width:640px;min-width:640px;color:#ffffff"></a>
    </td>
</tr>

When removing these lines, everything is back to normal.

revelt commented 7 years ago

Interesting code sample above, <td width="640" height="1"> would get expanded on Outlook 2013+ to height 19px, it's missing the font-size: fix. Imho it's quite stupid idea to use empty a tags to enforce width.

ericlepetit commented 7 years ago

This email from Uncommon Goods doesn't auto-scale on iOS 10 beta 8 but does scale on iOS9.

iOS 9	iOS 10 beta 8

This email uses a lot of colspan and the one on the nav bar is wrong (should be colspan=7 instead of 6). This seems to partially fix the auto-fit. The email doesn't seem to fully center. I havent had the time to fully look into this.

hteumeuleu commented 7 years ago

This email from ONL doesn't fully scale up on iOS 10 beta 8 and has much wider margins than on iOS 9.3. Here is the code from that email. Here are two screenshots.

iOS 9.3	iOS 10 beta 8

It looks like adding a padding:0; on the <body> solves the problem.

iOS 9.3 (with `padding:0;`)	iOS 10 beta 8 (with `padding:0;`)

hteumeuleu commented 7 years ago

This email from Zara doesn't fully scale up on iOS 10 beta 8 and has much wider margins than on iOS 9.3. Here is the code from that email. Here are two screenshots.

iOS 9.3	iOS 10 beta 8

It looks like adding a padding:0; on the <body> solves the problem.

iOS 9.3 (with `padding:0;`)	iOS 10 beta 8 (with `padding:0;`)

hteumeuleu commented 7 years ago

This email from Bonobo doesn't fully scale up on iOS 10 GM and has much wider margins than on iOS 9.3. Here is the code from that email. Here are two screenshots.

iOS 9.3	iOS 10 GM

It looks like adding a padding:0; on the <body> solves the problem.

iOS 9.3 (with `padding:0;`)	iOS 10 GM (with `padding:0;`)

(Hat tip to @ericlepetit for sharing this example with me.)

buzzert commented 7 years ago

Thanks for collecting all of these! I'm an Apple Mail engineer and I'm working on fixing as many of these issues as I can in an imminent software update. We are tracking this internally as well.

I left this comment on your blog as well, but if you'd like to disable automatic message reformatting all-together, you can add this metatag to your markup: <meta name=”x-apple-disable-message-reformatting”>

hteumeuleu commented 7 years ago

Thank you @buzzert ! This is really great to know. It's already helpful to fix bugs I encountered when using Scroll Snap Points in Apple Mail.

therealglazou commented 7 years ago

@buzzert glad to see you here ! More feedback here: http://www.glazman.org/weblog/dotclear/index.php?post/2016/09/15/email-in-iOS-10

gpalz commented 7 years ago

Auto-Scale issue on iOS 10

img_5052- 002

Newsletter.txt

hteumeuleu commented 7 years ago

@gpalz This looks like a screenshot from Gmail on iOS. If so, I'd suggest opening a new issue. (This looks related to this problem.)

marett commented 7 years ago

I began to observe this issue today after swapping my iPhone 6S to the smaller iPhone SE. Both phones are running iOS 10.0.2.

I have only observed this scaling issue on the smaller SE screen.

Some initial testing; I have resolved the issue by removing the following viewport meta tag:

<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1" />

I have not tested what the wider implications for removing this tag are on other clients/versions. But removing it has not had a negative impact on the iPhone 6S and has solved the issue on the iPhone SE

viewport

revelt commented 7 years ago

@marett mind you, the viewport you mentioned is incorrect because it's rigid. The correct viewport meta tag should be targeting device-width:

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Before iPhone 6, when all iPhones had the same screen width, the viewport of the Mail app was 320px. The wider screens have higher viewport (I suspect the same 375px), so 320px doesn't even make sense.

erickao08 commented 7 years ago

image1 002 _ink_li

Hi, I'm assuming this is something to do with the auto-scaling. After I rotating my iphone several times. The images will misaligned and overlap each other. I think it's something to do with the size changing. I've added those code you suggested into html. It doesn't work. I have not figured out how to fix this. Please advise. Thank you.

revelt commented 7 years ago

@erickao08 would you be able to share the particular email's HTML source code?

erickao08 commented 7 years ago

@revelt Here's the link. Sorry, my code is very messy. I was trying to apply all the solutions to all the problem I want to solve and I am lack of experience. Please advise. Thank you!

bigfatweb commented 7 years ago

@hteumeuleu I really enjoyed reading about this bug and fixes.

I'm also having some auto-scaling issues in Apple Mail on iOS 10 with my enewsletter. I would be greatly appreciative if anyone could please check my attached code and see what the problem might be?

Thank you in advance.

Adam bfw-code.txt

hteumeuleu commented 7 years ago

@bigfatweb I just tested your email using Putsmail on iOS 10.3 and have no problem with it in Apple Mail. Could you be more specific as with the type of email account you're using and the service you used to send your email ? Also feel free to provide a screenshot of the bug you're having.

bigfatweb commented 7 years ago

@hteumeuleu

Thanks so much for your assistance.

I’m viewing the email on my iPhone 6 iOS v10.3.2 (14F89) - IMAP

Both Apple Mail and the Outlook (v2.29.0) apps are displaying the email like the attached screen captures. i.e. non responsive, elements are not stacking on top of each other like it does in any browser (see this URL: http://www.mygc.com.au/newsletter/theloop)

We use Interspire Email Marketer via AWS SES to send to our email lists.

Any assistance would be greatly appreciated.

Regards Adam

bigfatweb commented 7 years ago

@hteumeuleu

Separate issue I know, but I thought it would be worth raising. I've also noticed on my PC (Windows 10 Home v1607) with Microsoft Outlook 2016 MSO (16.0.8067.2115) 32 bit, that the email newsletter looks like the attached, i.e. odd white lines appearing etc. Any ideas?

2017-06-22_2309

revelt commented 7 years ago

@bigfatweb I had a quick glance at the code, you've got empty TD's, that's a no-no. You should never allow that. Use table alignment and css padding as a means to align things. Spacer gif's are the last resort (yes they're still relevant in 2017 and no, you can't avoid using them on some cases) when you want a rigid "stick" to prop tables up from collapsing.

bigfatweb commented 7 years ago

@revelt Thank you Roy, much appreciated.

justinbiddle commented 7 years ago

Can anyone help me with this not scaling on iPhone?

http://j1presents.co.nz/portfolio/easter/

revelt commented 7 years ago

@justinbiddle mate, your email is a non-responsive, a 600px wide table. You want it to scale, but that's what coding it responsive does. If it did scale — presto, us email email developers would not need to code all that responsive code at all!

Tip: If you preview your email in Chrome mobile view and it is rigid, it will be the same on iOS. Try nailing it on Chrome mobile preview in Web Dev tools first. Also, try squishing the window — the email has to adapt to that too. If it does not the iPhone will behave the same.

justinbiddle commented 7 years ago

I get that is non responsive but i thought if it wasn't given any responsive code i.e. media queries to collapse into a single column that it would by default fit to screen which in most cases is terrible but because this artwork is compact enough i just wanted it scale to fit screen. is it possible to make the whole thing just fit to screen like when people don't use any responsive code and you see the whole website tiny on the screen. this may not make sense, i have put a lot of work into responsive email design ( http://j1presents.co.nz/portfolio/topup/ ) in other cases but in this case i just wanted to to fit/scale. I guess if it doesn't work that way i will just redo it as percentages and scale it all that way.

revelt commented 7 years ago

@justinbiddle the old trick used to be to set the viewport to be rigid, like

 <meta name="viewport" content="width=320, user-scalable=yes">

in your case that would be 600. It is not a best practice but if you test all relevant mobiles it might work.

But I just tried that and email looks the same — the original code already fits in the screen on iPhone 7:

img_0316_2

justinbiddle commented 7 years ago

Cool man thanks. I have seen it fitting to screen just by default on other devices. I wondered why it wasn't doing that on my iPhone 6. i will just redo the sucker in percentages and make it behave elastic. It just means i will have to slice it up and not use the whole background image etc. Just skinning the cat a different way. Thanks for your help.

revelt commented 7 years ago

@justinbiddle I noticed sometimes missing viewport behaves better on iOS, try that too

justinbiddle commented 7 years ago

Yeah i wondered if i took out the whole viewport meta it might make it work.

justinbiddle commented 7 years ago

Got it i just took out initial scale and hey presto!

arborcrowd commented 7 years ago

Hey Guys, I'm running into the same issue. I'm testing with the above recommendations and still can't get it to work. Any help would be awesome!

ac_template.zip crop

erickao08 commented 7 years ago

@arborcrowd Could you tell us which platform you're using? I tested it on iPhone SE and it looks fine.

arborcrowd commented 7 years ago

@erickao08 We're using eloqua to send these emails to folks. We've tested it so far on Apple Mail on Iphone 7 as well. Still shifted to the left.

arborcrowd commented 7 years ago

@erickao08 Maybe Eloqua is the problem?

charitysf commented 6 years ago

We have a similar issue where it is leaving a bunch of white space on the right hand side. We have the padding:0 and but it's still not working.

Any other tips or ideas? hipmunk.txt

Thanks in advance!

Jo-anneW commented 6 years ago

I've noticed that the above issue of the email shifting to the left is occurring; however it now affects iOS 11 on iPhone 7/8... Is anyone else seeing the same issue?

revelt commented 6 years ago

@Jo-anneW Can you confirm please, are you still talking about native Mail app on iOS 11? Because it has never happened for me on Apple Mail on iPhone; it used to be typical thing on iOS Gmail (which has since been fixed).

If it's happening for you on iOS11/native Mail app, please check the following:

Is the viewport meta the following: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
are -webkit-text-size-adjust:none in place in head styles. I'm also adding -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; on outermost <center> tag which I use for guaranteed centering of the email.
finally, are tables coded correctly, that is, there are no "protruding" bits, mismatching floats and so on. Also, ensure there is a an outermost container, not "loose" tables per-row.

Question: is email looking correctly on Chrome Inspect's "Device Toolbar"? Because if not, first nail the code there. If yes, then first check maybe your ESP is messing up the code.

Jo-anneW commented 6 years ago

@revelt thanks for the quick response, the issue has been spotted in the native mail app.

From your suggestions:

Is the viewport meta the following: Yes
are -webkit-text-size-adjust:none in place in head styles. I'm also adding -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; on outermost tag which I use for guaranteed centering of the email. -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; in body copy but not in head style - i will update and try again
finally, are tables coded correctly, that is, there are no "protruding" bits, mismatching floats and so on. Also, ensure there is a an outermost container, not "loose" tables per-row. Double checked the code and all as should be

Regarding your question, email looks fine until i test in Litmus (although it was first spotted by a colleague who had updated).

Thanks

Jo-anneW commented 6 years ago

@revelt adding '-webkit-text-size-adjust:none' doesn't seem to have made a difference :-(

revelt commented 6 years ago

@Jo-anneW yeah, I think it's the grand picture in layout, something's in layout causing this. What I'd do is isolate modules one-by-one and locate the culprit by narrowing down. Try removing everything, leave only carcass and make sure it is aligned correctly. Because it isn't, then it's outermost bits - such as body itself, outer <center> or outermost div. In such case I'd grab the outermost bits from a reliable boilerplate, then place modules back one-by-one.

Jo-anneW commented 6 years ago

@revelt thanks... I'll give another crack tomorrow when i've got a clear head and lots of coffee.

Thanks again for your suggestions :-)

hteumeuleu / email-bugs

Apple Mail in iOS 10 beta doesn't always auto-scale non responsive emails #18