New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
hteumeuleu opened this Issue Jun 21, 2016 · 50 comments

Comments

Projects
None yet
@hteumeuleu
Owner

hteumeuleu commented Jun 21, 2016

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.

Example by Alex Williams Example by Eric Lepetit

@hteumeuleu hteumeuleu added the bug label Jun 21, 2016

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jun 21, 2016

Owner

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

ONL email on iOS 9 ONL email on iOS 10

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 :

ONL email fixed on iOS 10

Owner

hteumeuleu commented Jun 21, 2016

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

ONL email on iOS 9 ONL email on iOS 10

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 :

ONL email fixed on iOS 10

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jun 21, 2016

Owner

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

La Poste email on iOS 9 La Poste email on iOS 10

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 :

La Poste email on iOS 10 fixed

Owner

hteumeuleu commented Jun 21, 2016

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

La Poste email on iOS 9 La Poste email on iOS 10

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 :

La Poste email on iOS 10 fixed

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jun 21, 2016

Owner

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

LEGO email on iOS 9 LEGO email on iOS 10

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 :

LEGO email on iOS 10 fixed

Owner

hteumeuleu commented Jun 21, 2016

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

LEGO email on iOS 9 LEGO email on iOS 10

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 :

LEGO email on iOS 10 fixed

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jun 21, 2016

Owner

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

Service-public.fr email on iOS 9 Service-public.fr email on iOS 10

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 :

Service-public.fr email on iOS 10 fixed

Owner

hteumeuleu commented Jun 21, 2016

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

Service-public.fr email on iOS 9 Service-public.fr email on iOS 10

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 :

Service-public.fr email on iOS 10 fixed

@ericlepetit

This comment has been minimized.

Show comment
Hide comment
@ericlepetit

ericlepetit Jun 21, 2016

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

ericlepetit commented Jun 21, 2016

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 hteumeuleu changed the title from Apple Mail in iOS 10 beta doesn't auto-scale non responsive emails to Apple Mail in iOS 10 beta doesn't always auto-scale non responsive emails Jun 30, 2016

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jul 7, 2016

Owner

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
ONL email on iOS 9 ONL email on iOS 10 beta 1 ONL email on iOS 10 beta 2
Service-public.fr email on iOS 9 Service-public.fr email on iOS 10 beta 1 Service-public.fr email on iOS 10 beta 2
Bobbi Brown email on iOS 9 Bobbi Brown email on iOS 10 beta 1 Bobbi Brown email on iOS 10 beta 2

The following emails still don't auto-scale.

iOS 9 iOS 10 beta 1 iOS 10 beta 2
La Poste email on iOS 9 La Poste email on iOS 10 beta 1 La Poste email on iOS 10 beta 2
LEGO email on iOS 9 LEGO email on iOS 10 beta 1 LEGO email on iOS 10 beta 2
Owner

hteumeuleu commented Jul 7, 2016

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
ONL email on iOS 9 ONL email on iOS 10 beta 1 ONL email on iOS 10 beta 2
Service-public.fr email on iOS 9 Service-public.fr email on iOS 10 beta 1 Service-public.fr email on iOS 10 beta 2
Bobbi Brown email on iOS 9 Bobbi Brown email on iOS 10 beta 1 Bobbi Brown email on iOS 10 beta 2

The following emails still don't auto-scale.

iOS 9 iOS 10 beta 1 iOS 10 beta 2
La Poste email on iOS 9 La Poste email on iOS 10 beta 1 La Poste email on iOS 10 beta 2
LEGO email on iOS 9 LEGO email on iOS 10 beta 1 LEGO email on iOS 10 beta 2
@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jul 20, 2016

Owner

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
La Poste email on iOS 9 La Poste email on iOS 10 beta 2 La Poste email on iOS 10 beta 3
LEGO email on iOS 9 LEGO email on iOS 10 beta 2 LEGO email on 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.

Owner

hteumeuleu commented Jul 20, 2016

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
La Poste email on iOS 9 La Poste email on iOS 10 beta 2 La Poste email on iOS 10 beta 3
LEGO email on iOS 9 LEGO email on iOS 10 beta 2 LEGO email on 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

This comment has been minimized.

Show comment
Hide comment
@ericlepetit

ericlepetit Aug 27, 2016

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

ericlepetit commented Aug 27, 2016

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

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Aug 27, 2016

Owner

Nope. Everything seems okay since beta 3.

Owner

hteumeuleu commented Aug 27, 2016

Nope. Everything seems okay since beta 3.

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Sep 5, 2016

Owner

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
Boulanger email on iOS 9.3 Boulanger email on 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.

Owner

hteumeuleu commented Sep 5, 2016

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
Boulanger email on iOS 9.3 Boulanger email on 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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Sep 5, 2016

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.

revelt commented Sep 5, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ericlepetit

ericlepetit Sep 6, 2016

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

iOS 9iOS 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.

ericlepetit commented Sep 6, 2016

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

iOS 9iOS 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

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Sep 8, 2016

Owner

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
ONL email on iOS 9.3 ONL email on 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;)
ONL email on iOS 9.3 ONL email on iOS 10 beta 8
Owner

hteumeuleu commented Sep 8, 2016

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
ONL email on iOS 9.3 ONL email on 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;)
ONL email on iOS 9.3 ONL email on iOS 10 beta 8
@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Sep 8, 2016

Owner

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
Zara email on iOS 9.3 Zara email on 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;)
Zara email on iOS 9.3 Zara email on iOS 10 beta 8
Owner

hteumeuleu commented Sep 8, 2016

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
Zara email on iOS 9.3 Zara email on 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;)
Zara email on iOS 9.3 Zara email on iOS 10 beta 8
@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Sep 12, 2016

Owner

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
Bonobo email on iOS 9.3 Bonobo email on 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;)
Bonobo email on iOS 9.3 Bonobo email on iOS 10 GM

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

Owner

hteumeuleu commented Sep 12, 2016

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
Bonobo email on iOS 9.3 Bonobo email on 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;)
Bonobo email on iOS 9.3 Bonobo email on iOS 10 GM

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

@buzzert

This comment has been minimized.

Show comment
Hide comment
@buzzert

buzzert Sep 13, 2016

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”>

buzzert commented Sep 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Sep 14, 2016

Owner

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.

Owner

hteumeuleu commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment

therealglazou commented Sep 15, 2016

@gpalz

This comment has been minimized.

Show comment
Hide comment
@gpalz

gpalz Sep 21, 2016

Auto-Scale issue on iOS 10

img_5052- 002

Newsletter.txt

gpalz commented Sep 21, 2016

Auto-Scale issue on iOS 10

img_5052- 002

Newsletter.txt

@hteumeuleu

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Sep 21, 2016

Owner

@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.)

Owner

hteumeuleu commented Sep 21, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@marett

marett Sep 26, 2016

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

marett commented Sep 26, 2016

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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Sep 26, 2016

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

revelt commented Sep 26, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@erickao08

erickao08 Nov 18, 2016

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.

erickao08 commented Nov 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Nov 19, 2016

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

revelt commented Nov 19, 2016

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

@erickao08

This comment has been minimized.

Show comment
Hide comment
@erickao08

erickao08 Nov 21, 2016

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

erickao08 commented Nov 21, 2016

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

garrettjohnson added a commit to northpointe/rockmail that referenced this issue Mar 20, 2017

@bigfatweb

This comment has been minimized.

Show comment
Hide comment
@bigfatweb

bigfatweb Jun 21, 2017

@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 commented Jun 21, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jun 22, 2017

Owner

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

Owner

hteumeuleu commented Jun 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@bigfatweb

bigfatweb Jun 22, 2017

@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

img_2236
img_2237
img_2238
img_2239

bigfatweb commented Jun 22, 2017

@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

img_2236
img_2237
img_2238
img_2239

@bigfatweb

This comment has been minimized.

Show comment
Hide comment
@bigfatweb

bigfatweb Jun 22, 2017

@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

bigfatweb commented Jun 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Jun 22, 2017

@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 commented Jun 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@bigfatweb

bigfatweb Jun 25, 2017

@revelt Thank you Roy, much appreciated.

bigfatweb commented Jun 25, 2017

@revelt Thank you Roy, much appreciated.

@justinbiddle

This comment has been minimized.

Show comment
Hide comment
@justinbiddle

justinbiddle Jul 4, 2017

Can anyone help me with this not scaling on iPhone?

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

justinbiddle commented Jul 4, 2017

Can anyone help me with this not scaling on iPhone?

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

@revelt

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Jul 4, 2017

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

revelt commented Jul 4, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@justinbiddle

justinbiddle Jul 4, 2017

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 commented Jul 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Jul 4, 2017

@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

revelt commented Jul 4, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@justinbiddle

justinbiddle Jul 4, 2017

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 commented Jul 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Jul 4, 2017

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

revelt commented Jul 4, 2017

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

@justinbiddle

This comment has been minimized.

Show comment
Hide comment
@justinbiddle

justinbiddle Jul 4, 2017

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

justinbiddle commented Jul 4, 2017

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

@justinbiddle

This comment has been minimized.

Show comment
Hide comment
@justinbiddle

justinbiddle Jul 4, 2017

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

justinbiddle commented Jul 4, 2017

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

@arborcrowd

This comment has been minimized.

Show comment
Hide comment
@arborcrowd

arborcrowd Jul 21, 2017

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

arborcrowd commented Jul 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@erickao08

erickao08 Jul 21, 2017

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

erickao08 commented Jul 21, 2017

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

@arborcrowd

This comment has been minimized.

Show comment
Hide comment
@arborcrowd

arborcrowd Jul 21, 2017

@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 Jul 21, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@arborcrowd

arborcrowd Jul 25, 2017

@erickao08 Maybe Eloqua is the problem?

arborcrowd commented Jul 25, 2017

@erickao08 Maybe Eloqua is the problem?

@charitysf

This comment has been minimized.

Show comment
Hide comment
@charitysf

charitysf Aug 29, 2017

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!

charitysf commented Aug 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Jo-anneW

Jo-anneW Oct 25, 2017

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 commented Oct 25, 2017

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

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Oct 25, 2017

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

revelt commented Oct 25, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@Jo-anneW

Jo-anneW Oct 25, 2017

@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 Oct 25, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@Jo-anneW

Jo-anneW Oct 25, 2017

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

Jo-anneW commented Oct 25, 2017

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

@revelt

This comment has been minimized.

Show comment
Hide comment
@revelt

revelt Oct 25, 2017

@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 commented Oct 25, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@Jo-anneW

Jo-anneW Oct 25, 2017

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

Thanks again for your suggestions :-)

Jo-anneW commented Oct 25, 2017

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

Thanks again for your suggestions :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment