NMiOS 9 Mail App for iPad Adds Padding That Can't Be Overridden
iOS9 has certainly been giving us quite a few headaches this week!
On top of the weird behaviour that Rémi originally reported from the Beta, I'm also seeing weird mystery space being added in the Mail app on iPad:
The markup has body:before {content: 'body';} to show that the light green is the body tag.
It seems to me that the padding is being added to the body, but there is no way to remove it. I've tried everything I can think of.
Obviously it makes plain-text emails look lovely and line up with the UI elements, but on many HTML emails it's a disaster. It's a big pain if you have a body background colour but then also want your tables to fill the viewport horizontally. This makes everything look quite weird because your tables end up with 47px on either side where the background colour shows through.
In the end I had to solve my problem by adding a div to wrap around all the content, and applying the background colour to that. I hid the div code in <!--[if !mso]><!--> and <!--<![endif]--> to hide it from Outlook because this is a template and the emails end up really long and I want to avoid the Outlook page-break bug. I don't really like using conditional code hacks in the HTML though so I'll keep trying to find a more elegant solution.
Nightmare!! h8 u, apple.
I just came across this bug today on iOS 10. I never noticed it on iOS 9. Fortunately, it looks like Litmus already solved the issue. In one of their emails, I noticed the following style rule in the
<head>I applied it to my templates, tested them and it worked flawlessly!
Is this the same issue that
Inline Blockhas on the web? Most browsers add an extra 2px margin on each side? There is a crafty CSS Tricks post that covers various fixes. I've used the comments hack to remove the spaces:div>one</div><!--
--><div>two</div><!--
--><div>three</div>
I've also found that email layouts are narrow enough for the negative hack to work.
Hello Nicole,
Thanks for sharing this. I spent the last hour playing with my iPad mini 2 and trying to find a solution, with no success. I tried playing the CSS
calcfunction and viewport units (vwandvh), but nothing helped remove this margin.However, I just noticed something even weirder. Turning with my iPad to landscape, opening different emails, switching between inboxes, I noticed that at some point, when I turned back my iPad to portrait, the email would display fine. And what's even weirder is that even if I switch between emails, every other email will now display correctly. But if I switch inbox again, the margin will reappear.
Here's an example with the latest email I received from Litmus, first when I open it in portrait mode, and then after playing with my iPad in landscape and turning it back to portrait.
That is bizarre that it can sometimes change after rotating the device.
Thanks for doing more investigation! I have spent about 3 hours on it so far, trying everything I can think of. It's very annoying.
@Remi, what you've described is what I used to use to solve a similar issue on iOS8. Still to this day I have not found a solution for that. But now we have this issue on iOS9...so the question is, which one to investigate first!
Here is that thread:
https://litmus.com/community/code/1332-update-layout-not-filling-ipad-viewport-with-single-column-nested-tables
One thing that fixed something major for me is Nicole's comment on this Litmus post: https://litmus.com/blog/what-email-designers-need-to-know-about-ios-9
Removing the
min-width: 100%from thebodyhas stopped the email from being scaled down more than necessary. Still need to remove extra white space between columns so that they don't stack, but this fix still helps a lot!Hey Courtney, thanks! Although I am a bit worried it might have been a bum steer, I think without min-width: 100% that emails don't centre properly in iOS8. I've just seen that start to happen and so far it seems that it's adding min-width back that fixes it. Very frustrating if it fixes iOS9 problems but causes iOS8 ones :(
Oh really? I haven't noticed this with the emails we removed the min-width from in Litmus.
Oh good! That's awesome. I haven't had a chance to do an isolated test of all of this stuff this week, so I have just been going off what happened on one particular project, and there's a chance I changed something else that caused it. It's been one of those weeks so anything could have happened :)
I'm seeing 2 issues with iOS 9:
1) iPad is rendering the email like media queries don't exist. WHAT?! It's like being squished so it stacks the columns, but MQ's don't come into effect even. Looks totally normal (desktop layout) on iOS 8 in Litmus preview. It must be this weird extra padding you have found?
2) iPhone is rendering 2 inline-block cols (fluid hybrid technique) that are 60%/40% width to stay side-by-side with 1 dropping below. Looks fine on iOS 8 Litmus preview. Typing this out I realize they could just be two TDs... but interesting how it works in iOS 8 but not iOS 9.
Ok, adding some background colours, I think it might be more than just the body padding that I'm having issues with. The investigation continues...
ETA: Here's what I have found so far:
So confusing!
Hey Courtney!
YES! I am seeing the squishing too.
To me it looks like what's happening (on portrait iPad for example) is that it adds that 47px padding to either side and then instead of using the remaining 674px as normal, it is scaling 768px down to fit into the 674px space.
The inline-block elements dropping down is a definite new bug as well. It's extremely annoying. Because of the weird scaling, it's not triggering the content stack, but as it scales down it must lose a pixel somewhere, so your inline-block elements no longer think they have enough space to sit side-by-side. I've gotten around it for now by either reducing the size of the blocks by 1px or by adding a media query to set the widths to percentages and leaving 1% spare. These are band-aid solutions of course! It's not always possible to do that on every layout.
WHYYYYYYYYYYY APPLE
Hi Nicole ! I have the same
display:inline-blockas you do. And I found a solution by removing spaces between any elements set asdisplay:inline-block.So instead of writing this :
You'll need to write this :
The worrying part of this, is that this is an old WebKit bug from 2013. Add this to the sibling selector bug I previously reported, and I'm getting very worried that Apple reintroduced a lot a WebKit bugs from the 2010-2013 era. I have no idea how this is even possible, but I think we should now look for bugs from this period for any other weird Apple Mail behavior.
Oh dear, bringing back 2013 bugs! That is definitely not cool.
Thanks so much for this fix though, it is much easier and more elegant than what I was doing to fix the problem.
Thanks for figuring out this fix Rémi! Confirming this works even with MSO conditional comments between the columns.
I wonder what the chances are of Apple fixing this issue in an update...
we need to stick things in between those two divs though - eg. we need to add a ghost column in a MSO conditional comment, otherwise both the divs will stack on Outlook. has anyone found a fix for that?
Elliot, you can. Just remove white space from between the end of the first div and the start of the MSO conditional, and then from between the end of the MSO conditional and the next div.
I couldn't get the no-spaces approach to work on our test iPad, either by removing the ghost table between the divs entirely, or by taking out the spaces but keeping the ghost table.
I did however manage to get it working though another approach - I need to tidy it up but it works in Litmus so far. I'll test in the studio tomorrow and write an update
I would wonder if something else is causing it Elliot? Rémi's fix works for us on both our physical iPad device, as well as in Litmus' preview. We also removed
min-width: 100%;from thebodywhich was causing extra scaling/squishing. If you have that on there still might be worth removing that to see if it helps.Yeah, I've managed to tweak a section's padding so I still have the amount I need to keep the layout as is, but there's some "empty" space that accounts for this squishing thing. But some sections I can't do this with, so they continue to stack due to not lack of width space.
Why Apple why?!?!?! :(
Well, if it's really just adding padding to the body, here's something you could try to get around it.
Absolute positioning should ignore padding on its container. This might have some side effects.
Hi Michael, that does seem to work on the left-hand side, but I still end up with a gap down the right-hand side :/
Try adding this:
I don't have iOS9 to test it myself unfortunately.
Still no good, unfortunately. Who knows what they're doing! :(
Thank you for this info Nicole :)
I'm currently trying to fix a previously lovely fluid hybrid email - which now looks wrong on ipad iOS9... :'(
Hey Clara, Rémi posted the fix for that above here:
https://litmus.com/community/discussions/4223-ios-9-mail-app-for-ipad-adds-padding-that-can-t-be-overridden#comment-5766
It looks like they have re-introduced an old bug that affects inline-block elements :(
I would never have thought Apple would start introducing new bugs for us!
Thanks! It works beautifully :D