Ensure that Your Entire Email Is Rendered on iPhone & iPad
We’ve heard reports that this fix doesn’t work for iOS 7. We’re still investigating this issue to try and find a solution. If you find a way to fix this problem for iOS 7, please let us know!
Through additional testing, we have confirmed that the issue is related to the user’s decision to either use the IMAP or the POP protocol.
For users who chose IMAP, an email will be fully rendered when the user opens the message. For those who chose POP, the content will be truncated and the user will be asked to download the full message.
By applying the following fix, you can ensure your email will render properly regardless of the user’s configuration.
While using the native email clients for the iPhone and iPad, we noticed that in approximately 10-15% of our test emails, the reader only displayed a small segment of the original email. When this happens, it renders the loaded portion of the email with a button at the bottom which reads: “Download remaining XX bytes.” Often times the button appears below the fold, especially in landscape view, making it easy to miss.
Most of the time, when the button is touched the remainder of the email is rendered. In other instances, we’ve seen it load a second portion of the email with no option for downloading the remainder. When the device is flipped from portrait to landscape the entire message shows, when it is flipped back the entire message remains – which leads us to believe that this is an iOS glitch.
Let’s start with some examples:
In this particular example, the only thing that is loaded from the beginning is the header image and the button appears well below the fold. Also, the email doesn’t fully download after tapping the button. If you flip the phone to landscape view, it looks ok. If you flip it back, everything still looks ok.
Here it is when flipped:
Another thing to point out is that most of the original email was not loaded from the beginning. Therefore there’s no content being displayed just under the subject line in the inbox:
This might cause people to avoid opening the email in the first place. Yikes!
So what’s the fix?
- Make sure that you have a minimum of 1,019 characters before your closing head tag (</head>) including spaces and carriage returns.If you don’t have any need for more styles nor a style block, try inserting several lines of empty spaces.
Strange right? This fixed the problem in each of the emails we tested. Oddly enough, I think 1,024 characters totals a single KB – so this might actually be caused by some type of iOS buffering issue.
- Another option is to remove your <head></head> tags entirely. Be careful with this solution, some email service providers might place head tags within your email dynamically.
- If your email is below 10k, you can try removing all carriage returns and double spaces. We’ve seen instances where the download button no longer showed up if the email was at or below 7k. This option would be my last resort.
Here are some of the notes we took while testing just in case the above suggestions do not work for you:
- The issue occurs with the exact same emails on the iPhone and iPad which leads us to the conclusion that it’s an iOS thing, we tested in iOS4 and iOS5.
- It’s not sender specific – this eliminates issues with sender reputation.
- It’s not column specific.
- It doesn’t seem to have anything to do with nested tables.
- Some tests that are over 25K render just fine yet others that are less than 10K cause the issue.
- The amount that is left to download is not consistent in each of the emails that triggered the issue.
- There’s no clear reason why it gets cut off and from where within the email.
- Doesn’t seem to be due to meta tags, DOCTYPE, nor media queries. Note: When tinkering with these variables, you might create/resolve the issue because you are switching up the total number of characters before the closing head tag.
- It has nothing to do with the internet service (ie: being temporarily interrupted).
- There doesn’t appear to be any caching – if an email is opened, then downloaded, the same issue will happen if the exact same email is sent again.
- The date/time settings on each of my devices are correct.
- I have seen people say that it happens when receiving mail on an Exchange account, I am using a POP3 account and I’m still seeing the issue.
- It doesn’t seem to be effected by images, I was able to recreate the issue with all images removed.
- It is not caused by html entities ( ).
- I tried replacing all the content with Latin and that still didn’t fix it – that rules out content.
- It’s not caused by empty table cells.
- It’s not a special character – I tried cutting/pasting into Notepad and then I resent the email.
In Conclusion
These days, it’s hard enough to get your email to render correctly in each email client, yet alone having to worry about your message getting chopped off in two of the most popular mobile devices. If this happens to you and you find a different work-around, please don’t hesitate to share your comments below! Or, if you are an iPhone/iPad user and you figure out a way to disable the download button, please share and we can update this blog post for others who are having the same issue.
Cheers and happy testing everyone!
Author: Kyle Lapaglia
Author: Kyle Lapaglia
57 thoughts on “Ensure that Your Entire Email Is Rendered on iPhone & iPad”
Comments are closed.
Your solution of “Make sure that you have a minimum of 1,019 characters before your closing head tag (</head>) including spaces and carriage returns.” prompted me to look at the html code of one of my messages.
For me there was no content between the head tags except for: <head>
<meta content=”text/html;charset=UTF-8″ http-equiv=”content-type” />
<title></title>
</head>
So that leads me to the question, where do we put the 1091 characters?
Greetings Jeffery, you would add the spaces in-between the </title> and the </head>. So for example your header would look like:
<meta content=”text/html;charset=UTF-8″ http-equiv=”content-type” />
<title></title>
</head>
Please let us know if you have any other questions.
u would add the spaces in-between the title
Hi There!
I tried adding spaces, and/or span tags between the </title> and </head> tag, but the system automatically deletes them, I’m assuming to clean up the code. Do you know how I might get around this?
Regadint the message “This message has no content”, your tip to add 1091 characters within <head></head> works. But I think the reason is the email client is not able to find any non-html text within certain characters or something as I am not seeing that message if I place some text like “View in Browser” before my header image! I can see the same text “View in Browser” instead no content.
Colleen,
I am not sure what system you are using but you could certainly make up some embedded CSS to use as characters, just don’t reference it anywhere within your email.
For example:
<style>
.fake_css {border-top:1px solid #000000}
</style>
(I would then add lots of CSS declarations to that class in order to get your total number of characters up to 1091)
Maybe your system won’t delete it if it seems valuable.
Worked for me! I found the emails were loading fully if I was on WiFi, but if I turned WiFi off, I encountered the issue. However, this fixed it.
To save the rest of you some time, here’s a section of dummy CSS we added to our existing <style> tag.
.fake_css {
width:100%;
display: block;
-webkit-text-size-adjust:none;
margin: 1em 0;
color: black;
text-decoration: none;
border-bottom: none;
background: none;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
background:none;
border-bottom:thin;
border-bottom-style:double;
background-repeat:repeat;
border-left-color:#C06;
background-attachment:scroll;
border:thin;
page-break-before:auto;
page-break-before:avoid;
page-break-inside:inherit;
azimuth:center-left;
vertical-align:inherit;
font-stretch:extra-condensed;
font-size-adjust:none;
list-style-image: none;
counter-reset:none;
letter-spacing:normal;
empty-cells:inherit;
elevation:higher;
}
In recent days, I am trying to understand it, and searched a lot from the internet.but I still can not find a reasonable one. This article gives a good description about it,and help me understand the issue which confused me a lot.Thanks for your sharing!
Thanks for this article. Unfortunately, my ESP doesn’t allow me to edit what’s inside the head.
your second tip has a typo – it says “Another option is to remove your tags entirely. ” I assume you meant that to say remove your HEAD tags?
Unfortunately, also not an option for me. Will you be enhancing the EoA tool to render what the email looks like after the user hits ‘download’ ? Cause otherwise, I’m kind of dead in the water with testing for iphone, which is certainly pretty important.
thanks!
There are two issues facing email downloads on iOS, one being it uses dual-threading for the head and body which is why increasing size of head downloads more of the email. The other issue facing is if your email is quite large more than 50/60kb (inc images) the download is going to depend on your connection type and speed.
Link below explains in more detail.
http://stackoverflow.com/questions/9323148/html-email-doesnt-display-in-iphone-mail-until-download-full-message-selected
When I add fake <style> after </title></head> code analysis summary shows a critical error as follows:
Gmail
1 Critical 2 Moderate 2 Minor
STYLE – STYLE declaration not supported in HEAD tag.
Is this okay or will it cause gmail to end up in the spam folders of recipients?
Yay, yay and yay! Thanks so much for solving this problem!!
Would luv to see a preview in the test when recipient clicks on ‘download’…but thanks for all the info just the same!
Alessandra, your code worked perfectly! Thank you! Laurie Chu, you need to put the code in before you close the head tag.
randomly reading this and so saying hi Laurie Chu!
Is this workaround still required in iOS 6?
Yes, this fix is still required when working with iOS6.
I assume that a comment tag with some blah blah inside would work too, no?
Well, this workaround WAS working for us. It looks like ever since the 6.0.3 update, it’s not working any more. Anyone else having this problem?
I tried your suggestion and this does not work. If I add additional “fake” CSS the opposite occurs where the download button remains but with an increased number of KB to download. Is the solution presented here in this article no longer relevant to iPhone 5/iOS6.1.4?
@Scott and Keiron,
I checked into this and the fix is still working. I used the responsive template we offer for free to check this. We use spaces instead of “dummy css” and that’s the approach I’d recommend. If you’d like to send me some code that isn’t working properly, I’d be happy to take a look at it. Just send it attached as a text file to geoff [at] emailonacid.com.
YES. Spaces do work! Thank you so much Geoff. Fake CSS does not.
@Geoff
Thanks for this, big help.
If we add spaces before the closing header tag, they seem to be removed again once we save it – is that just us?
Cheers
@ListsUK,
What program are you saving your email in? The spaces shouldn’t be removed.
@Geoff
Seems the blanks spaces stay in, unless we paste them into a TinyMCE editor, when it either takes them out or jumps them into the body text rather than between the header tags – weird!
I’ll give it a go with the sample code @Alessandra mentions above.
Thanks.
Folks,
We have tried the extra characters in the head, and also the empty spaces in the head. both with character counts over 1100.
The “fake” CSS worked in the EOA test preview, but not for our CEO using the 4S iPhone (using POP).
The empty spaces version did not work well at all.
Are there any ideas?
Thank you!!
STEmails,
This may be caused by your sending ESP removing the spaces (or otherwise changing your code). Did you run your Acid Tests by sending the email from your ESP to your EOA Inbox and testing it from there?
No, not yet, will give that a try. Thanks for the suggestion.
Actually, I’m wrong, we definitely did test the email from ESP to EOA.
The original EOA test was NOT successful, but after we added the CSS in the head, it the EOA test WAS successful The screenshot showed the content in the 2nd test.
The problem is that it is still NOT working in the iPhone 4S of our CEO, even after the successful test in EOA.
I haven’t had any luck with the tips mentioned in this article. I’m using POP, over 1019 characters in the <style> section of my email, the email is about 12k total. Using an iPhone 5 with iOS 6.1. In the message listing it says “this message contains no content”. When you view the message nothing shows up until you hit download remaining. Any suggestions? Thanks.
We have Exchange Server 2010 and using Iphone to receive and Send emails,
When HTML based emails are opened from Iphone, The email just shows the text and not the HTML
So the HTML is not rendered on IPhone, if the same email is FORWARDED from Outlook and opened on Iphone HTML is rendered correctly.
Hi Prasad,
Same issue in my case. Did u get any solution ??
I have 4000 characters in between the head area. The fake css wouldn’t be needed and it is still not rendering in EOA for iphone/ipad.
Funny enough that it renders fine on my iphone 5 but not the preview in EOA (pop or imap).
I read through the entire comments and there doesn’t seem to be anyone else that has an alternate solution.
Any ideas?
Joelle123,
Looks like we’re having an issue with that feature at the moment. I have submitted a ticket to have it fixed. Sorry about that!
Joelle123,
Did you update to IOS7? That seems to be fixed in IOS7
The IMAP/POP preview feature is working properly again, just to let you all know.
Happy testing!
It’s not working on iOS 7.0.3. I tried with spaces, with dummy styles, nothing. Does anybody know how to fix this?
I have the same problem. Any fix on iOS 7 ?
Agreed, none of the above fixes seem to work on iOS 7…
iOs 7 previews correctly but still doesnt work on ipad, ipaf gmail, iphone 4s-5 (ios 6 and lower).
Again when I send to actual device it renders fine.
One thing is my “ESP” pushes the head title and styles tags below the body (bummer). So while it renders correctly in most of the previews (darn you lotus notes and blackberry :)) it seems iphone and ipad sans iOS 7 will not preview.
Well that doesn’t really work does it? I have 2780 characters in my head and I still get the partial render of my email. How come emailonacid never had this issue before and suddenly now I get that?
Dave,
The issue you are experiencing is with the iOS, not with Email on Acid. If you come up with another solution, we’d love to share it with our readers.
One of the comments on this post on Campaign Monitor about this issue indicates that compressing whitespace within the body of an email (especially removing it at the beginning of lines) also solves this. My recent experience shows that this is likely true: emails with HTML over 100KB are still loading entirely on iOS 6, even when accessed via POP over a mobile connection. I have no conclusive evidence that this alone is responsible, but it’s an approach worth trying.
https://www.campaignmonitor.com/blog/post/3857/ios-email-truncation
I appreciate, cause I found just what I was looking for. You have ended my 4 day long hunt! God Bless you man. Have a nice day. Bye adgdaddakaae
Adding extra characters to the header did nothing to solve my problem of getting “This message has no content” when viewed in the iPhone list view. I tried everything.
My html email was a simple html shell that simply displayed a holiday photo that was hosted on my server. There was no actual text in my email besides the html.
What solved it for me was simply putting paragraph tag and some text in the body of the html.
I put:
Merry Chistmas!
That’s all it took.
And because I didn’t really want that text to be visible, I made it white, the same color as my background.
Merry Chistmas!
Hope that helps someone.
for me the solution to this was removing a custom font..which was in the body
i.e. this
<link rel=’stylesheet’ type=’text/css’ media=”all” href=”//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300italic,300,400italic,500,500italic,700,700italic,900,900italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic|Roboto+Slab:400,100,300,700″/>
I am trying to send an email (html) , it looks perfect on android, computers etc.. it is doubling the header & first paragraph on an iphone?! Cannot find it in the code anywhere. Can you please help me?
hello .. any idea how to prevent the multiple email addresses in the original email being replaced with only the sender’s email as “xyz wrote…..” . To explain further : Suppose, i am getting an email from someone with multiple people in “CC” and “To”.
If i do a “reply all” or “reply only to the sender”, in my reply, all the other addresses other than the sender’s name gets cut off from the email to which i am replying.. This behavior seriously deforms the email chain and make us lose track of who all where there in the earlier email. This is especially bad when using for corporate official emails.
If i use my Samsung email app, the addresses will not get cut off.
So I was forced to replace samsung as my preferred phone since heavy user of email.
This wasn’t working for me in iOS 7 or 8. I fixed by wrapping a my main table with style=”table-layout: fixed; overflow: hidden; display: block”. Displayed correctly in all clients (But added extra space to the bottom of my Apple mobile emails.) So try this to fix it, hope it helps:
We came across a similar issue where I work and it was unrelated to the above suggested fixes and I wanted to share. After trying all of the above tricks, we went back and looked at the code line by line to find an error in a link we used for a google font. This error resulted in the email showing up blank only in Iphones, so we assumed it was related to the same issues as listed above. Luckily, with a replaced font link everything was working like normal again! Hopefully this information helps someone in a similar situation!
Had a similar issue with an email application I worked on. Slight difference in that the preview pane was displaying the content of the email, but the main email pane was not. The email had a “text/html” portion and a “text/plain” portion. Turned out to be the ORDER of the views.
If the “text/html” view was added to the message first, the message would be visible in the preview pane but not the main email pane, and the “text/plain” portion would be visible in the main email pane (but since the test emails had no plain text portion, we were getting the no content message). Swapping the “text/plain” and “text/html” portions of the message, so the HTML was added to the message after the plain text portion, and the HTML portion of the email became readable in the IOS mail app.
I have tried all these suggestions and nothing worked so far…
What I get is an email from a service provider with a log of my alarm account activity for the previous 24hrs. So I can’t change any content. It views fine in Outlook on PC, but not always in iPhone.
I have iPhone5 (latest iOS9) using mail app with POP. What happens is some days (maybe once every 2 weeks) the log is truncated and there is not option to download the rest of the message. I tried restarting, resetting network to defaults, crashing/forcing a close the mail app. Refreshing (rechecking for more email), portrait and landscape mode and more.
What finally worked to see the whole email… yes I found a workaround for this time anyways… FROM the LIST of EMAILS in INBOX (not while in the broken email itself), slide left and choose “. . .” and then the Forward option. A new email is created with the full text of the previous email. This does not work if you are in the broken email, you have to be in the LIST of emails.
I assume that being in the list of emails is a different scenario than being in the broken email. But it allows be to view my log and then I can delete the draft. If I email it to myself, I get the complete email on my phone (not truncated) and then the original email is now ALSO fixed.
Go figure… this has been a bug for years in iOS and I pray that every iOS update has a fix, but now we have a work around. Hope this helps you too.
Brian
Brian, thanks for sharing this! Worked for us as well.
Just add a comment tag in the <head> to pad it out. such as
<!– IOS requires minimum of 1,019 characters in <head>
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
……………………………………………….
isn’t that special? –>
that should stop it being removed
I can confirm that the 1019 chars workaround still fixes the issue on iOS 9.
I create my email templates using Foundation for Emails which has the following head out-of-the-box:
<head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><meta name=”viewport” content=”width=device-width”><title>Some title</title></head>
As Mark suggests above I added the following comment between </title> and </head>:
</title><!–…1019.chars.padding.for.full.download.in.iOS.Mail…………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….–></head>
I am in iOS 9.3.5 and I have added the 1019 chars in my header yet I am still getting the “This message was downloaded as plain text.” message. My email has images and an attachment. Does anyone have any other workarounds?
Thanks so much for the comment hack! I can confirm that this works with iOS 10.x! I am using Zurb foundation 2, too, and this was the final push to make my mails look great on basically any device.