Cerberus-responsive.html vertically cut off in height in iOS Outlook app
s28491 opened this issue · comments
Hello,
The template cerberus-responsive.html gets cut off in vertical height at the bottom when viewing in Outlook app on iPhone. I tried every single cross-examination and elimination process of what could be the culprit and only thing I found out is that, if I simply duplicate contents between
<!-- Email Body : BEGIN -->
<table>
/* copy everything here */
</table>
<!-- Email Body : END -->
and paste them inside inside this same table
<!-- Email Body : BEGIN -->
<table>
/* pasting everything here next to existing content that I copied */
</table>
<!-- Email Body : END -->
the vertical height of the email will somehow force to reveal the bottom of the content of the original email, but it will cut off the content of the duplicate one.
Please see video example here:
https://goo.gl/photos/EBNRDUBWErXR2KuZ7
(1st email is original code, the 2nd is same code with duplicated Email Body content inside same table)
Please help if possible, it's been 6 days now that I've been trying to solve this.
If I add height in pixels in this table, the email will reveal the contents but it will also expand the height of every child element inside this table. If I declare this height in percentage, nothing will happen.
@s28491 Hmm odd, I will look into this when I can.
In the meantime, I'd recommend using Campaign Monitor to send tests instead of Putsmail. Your video does not show a responsive email. I've run into problems with Putsmail changing the email code before, not sure exactly what it's doing but I wouldn't recommend it.
Thank you so much for responding so quickly. Will try as you advised. And yes, the responsive.html version does not get rendered responsively in Outlook, but the hybrid.html version, interestingly enough, does.
Hello,
Just wanted to update that the same issue appears when sent from Campaign Monitor as well. Please see video here:
https://goo.gl/photos/UzyLMjXei2VkJiSg8
(Again, 1st email is original responsive.html code, the 2nd is duplicated content of Email Body table)
Interestingly again, the responsiveness of the layout is ignored in outlook app when sent from Campaign Monitor as well.
The iOS version is 10.2.1.
The Microsoft Outlook app is up to date.
Hello,
I have a new update regarding this bug, and I might be onto something.
It starts to point to the fact that it has nothing to do with your code, but with something in the classes in general I believe. In this instance I used entirely different template - the Litmus Slate template (https://litmus.com/resources/free-responsive-email-templates). The exact same cut off happens with this template in iOS Outlook app as well, whereas on Gmail app it looks perfectly normal. Please see video here:
https://goo.gl/photos/qf1VcHApWCLazz8g6
On the other hand, I also accidentally created a Cerberus-responsive.html template newsletter that shows correctly, without the bug! While I was fixing little design details on this newsletter, I discovered that one 'under-construction' version of this newsletter shows perfectly fine in iOS Outlook app. However, when I fix the little design bits so it can be presentable in other platforms, the bug shows up again. I cannot for the life of me understand which bit of code makes this happen. If you want I can send you the 'under-construction' version (the one without the bug) and the finished version (with the bug) for you to compare.
Please see video of this:
https://goo.gl/photos/AQo5zmSkRhdNueas8
Hmm, this is weird. Yesterday I updated my iOS app and started seeing a bunch of bugs. I've also noticed some recent, related community chatter.
I'll try testing some emails I'm working on to see if it's a Cerberus problem or a general email code problem.
New update. As far as my case is concerned, I found the exact piece of code that triggers the bug, but I am honestly not so sure if this information will help in any way whatsoever, since it simply does not make any sense. Anyways, the code that triggers the bug is if you declare
width="" height=""
inside the img tag
Hope it helps.
( I tested in Litmus Slate template and when I removed all these declarations from img tags, the mail showed in entirety.)
Edit:
The problem is, I CAN declare width and height to couple of img tags, but as soon as I declare to a 'one to many', the bug triggers. I am not sure I have the time to investigate this any further so I am just gonna go with trying to avoid these declarations altogether, if possible. Granted, I haven't used height:auto; nor class="fluid" or "center-on-narrow" on any of these problematic img tags, so this might be the culprit as well, so I'm gonna post update on this as well. But I doubt it will help, since your Cerberus-responsive.html code has these declared in every img tag.
Great thanks! I'll do some testing on my end to see if this fixes the issue.
Has anyone explored reporting this to Microsoft?
@s28491 I was able to replicate your issue and fix. After removing all width and height declarations, the email displayed in its entirety:
However in the process the email lost it's media query support, which iOS Outlook should have.
Furthermore, I re-opened first text email (with width and height declarations) a second time and it displayed in it's entirety, albeit in desktop mode too.
EDIT
I reported this to Microsoft - outlook@litmus.com.
Update: This issue seems to be resolved. Sending a test email with image width and height attributes displays the email body in its entirety in iOS Outlook, rendered in hybrid display (iOS Outlook did, in fact, lose media query support).
Any solution to keep media query support.. ?
@andyroblesr mobile Outlook should presently support media queries.
I have same issue than s28491:
After first opening, starts cutting off, from down to up..
Here is the code adapted from your file..
early_adopters_email.txt
@andyroblesr do you see this issue with the original Cerberus code?
Yep..
Seems to be more related tp this issue.
Just posted some additional info in that other thread you mentioned, @TedGoas. It does appear to be related.
I've found what's causing the issue! Removing this part from the css in head resolves the issue and extra padding to outlook app completely:
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */ @media only screen and (min-device-width: 320px) and (max-device-width: 374px) { .email-container { min-width: 320px !important; } } /* iPhone 6, 6S, 7, 8, and X */ @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { .email-container { min-width: 375px !important; } } /* iPhone 6+, 7+, and 8+ */ @media only screen and (min-device-width: 414px) { .email-container { min-width: 414px !important; } }