What to expect with iOS 10

What to Expect When You’re Expecting the iOS 10 Mail App


iOS has become one of the biggest players in the world of email, and as a developer I look forward to each new iOS release with apprehension and excitement. The newest version of iOS should be coming out in the next few months, so we wanted to give you a heads up on the challenges and opportunities that this new OS will bring.

We tested a ton of emails in the Mail app for iOS 10 public beta, and here’s what we found.

The Good News

Video is Back!

In my testing, I found that the <video> tag would play in the email client when paired with an mp4 video. The user will see a play button, and after tapping it the video will play in fullscreen. I found that OGG and WebM video didn’t work, so be sure to use mp4 if you want to include video in email.

Check out our article on adding video to emails.

Interactivity (and Sibling Selectors) Work

Techniques like interactive carousels and mobile image swaps still work correctly. I tested a lot of interactive and animated emails created by Justin Khoo as well. Here’s a list of techniques that still work in iOS 10 Mail:

As with all things email, make sure you test before you send! If you’d like to use an interactive or animated email, make sure you do some testing in iOS 10 before hitting that send button. We found that CSS translate and fixed positioning are not always supported in iOS 10 Mail, more on that below.

Targeting with Media Queries

Of course, media queries still work in the iOS10 Mail app. What kind of modern email client wouldn’t support media queries? Huh, Gmail? You monster.

Supported media queries include the usual min-width and max-width as well as webkit-min-device-pixel-ratio. You can also use min-device-width and max-device-width to target devices only.

Orientation queries don’t really work, as landscape will trigger this query regardless of orientation and portrait will never be triggered.

Queries targeting height returned a viewport height of 1px, which is obviously incorrect. This may just be a bug in the beta, but we won’t know until the final release.

The Bad News

Wrapping Block Elements

As iOS 9 Mail did before it, iOS 10 Mail has a built-in resizing feature that will wrap block elements down to the next line if they are too wide for the viewport, even if they are inside of a fixed-width container.

For example, if you have two 300px images inside of a 600px table, on iOS 10 those images will be stacked instead of side-by-side. In iOS 7 and 8, the email would have been “zoomed out” to make the images fit side by side. While the “zoom out” effect could make the email appear like a tiny desktop version, this was at least predictable behavior. The new stacking effect can cause the layout to change in ways that are unexpected and make the layout look worse.

You can defeat this bug by adding min-width to your fixed-width container. This will prevent iOS Mail from collapsing it and stacking the elements within. If all of your content is built inside of a single container element, you can apply this style to it and the whole email should not collapse in iOS Mail 10. You can also get around this but putting the content that should be side-by-side into two TDs. iOS Mail will not cause TDs that are in the same row to stack.

You can check out this code sample which highlights these differences.

CSS Transitions & Fixed Positioning

Some CSS transitions may not work properly in iOS 10. Instead of showing the element moving, it will instead appear in its final position. This problem happens especially when an element is moved from “off screen” to a final resting position on screen. You can see this problem in action with Justin Khoo’s Entrance Effects email.

Another issue I found was that the iOS 10 mail app doesn’t play well with fixed position elements. For example, adding a “position:fixed” menu to the top of your email worked in iOS 9 Mail (sticking to the top of the screen as the user scrolls down), but in iOS 10 the element will remain where the top and left styled placed it and will not stick to the top of the screen.

Neither of these techniques is seeing widespread use, but it’s good to be aware of when using advanced techniques like the ones Alex covers in his Ultimate CSS Animation Guide.

Just a Heads Up

All of this information has been gathered from testing emails in a public beta, so we can’t know if Apple will make any additional changes before the new iOS goes live. We’ll make sure to update this blog if anything changes when the new iOS is released.

Author: Alex Ilhan

2 thoughts on “What to Expect When You’re Expecting the iOS 10 Mail App”

  1. Great article ! Regarding the Wrapping Block Elements part, have you tried the latest versions of iOS 10 beta ? The first beta introduced a lot of bugs regarding zooming behavior (see this link), but most of these seems to have been fixed by Beta 3.
    As for the stacking bug reported in iOS 9, this is more likely due to a white space bug between inline elements. Usually, removing the spaces in the HTML code between the inline elements is enough to fix this. (See this or that for more details.) I have tested that in your test email, and it worked to fix it in iOS 9 (without the need of a min-width).

  2. Thanks for confirming my worries about fixed positioning not being supported any more. This is awful timing as I’ve been rolling out fixed position CTAs on my emails recently. Do you think there’s any solution to this or is this the end of fixed position elements in email?

    Thanks

    Luke

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies