Open hteumeuleu opened 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 :
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 :
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 :
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 :
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 I haven't seen any issues on beta 7. Have you?
Nope. Everything seems okay since beta 3.
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.
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.
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.
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; ) |
---|---|
![]() |
![]() |
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; ) |
---|---|
![]() |
![]() |
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.)
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”>
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.
@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 This looks like a screenshot from Gmail on iOS. If so, I'd suggest opening a new issue. (This looks related to this problem.)
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
@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.
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.
@erickao08 would you be able to share the particular email's HTML source code?
@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!
@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
@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.
@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
@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?
@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.
@revelt Thank you Roy, much appreciated.
Can anyone help me with this not scaling on iPhone?
@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.
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.
@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:
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.
@justinbiddle I noticed sometimes missing viewport behaves better on iOS, try that too
Yeah i wondered if i took out the whole viewport meta it might make it work.
Got it i just took out initial scale and hey presto!
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!
@arborcrowd Could you tell us which platform you're using? I tested it on iPhone SE and it looks fine.
@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.
@erickao08 Maybe Eloqua is the problem?
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!
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?
@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:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-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.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.
@revelt thanks for the quick response, the issue has been spotted in the native mail app.
From your suggestions:
Regarding your question, email looks fine until i test in Litmus (although it was first spotted by a colleague who had updated).
Thanks
@revelt adding '-webkit-text-size-adjust:none' doesn't seem to have made a difference :-(
@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.
@revelt thanks... I'll give another crack tomorrow when i've got a clear head and lots of coffee.
Thanks again for your suggestions :-)
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.