iOS 9 beta : The Good and The Bad

Hello everyone ! I've been testing Apple Mail in the latest iOS 9 beta this week on an iPod touch. I wanted to share with you my early findings. Unfortunately, while I have some good news, I also found some worrying unexpected new behavior.

The good parts

Responsive images

iOS 9 now support responsive images with srcset and w descriptors. While the srcset attribute for <img> tags was already supported on iOS 8, it only supported x descriptors, meaning you could load a specific image depending on the pixel ratio of the screen, but not on its width or height. Now we can use this to display a different image depending on the size of the screen. Here is an example of the syntax you'd use :

<img src="fallback.jpg" srcset="mobile.jpg 320w, desktop.jpg 640w" />

Support for @supports declarations in CSS

Instead of relying on hacky -webkit- selectors (which are now aliased by pretty much every browsers anyway), you can use this declarations if a specific property and value is supported. For example, if you want to test if Apple Mail supports position:sticky (which it does since iOS 7), you can now write the following :

@supports (position:-webkit-sticky) or (position:sticky) {
    .header {
        position:-webkit-sticky;
        position:sticky;
    }
}

Support for backdrop-filter in CSS

With this you can apply CSS filters (like blur, contrast, …) to the backdrop of an element, that is, what's beneath the element. Here's an example of a rotating square div with a backdrop-filter:blur(20px); on top of an image.

You can read more about Advanced CSS filters here.

---

The bad parts

Zooming mecanism

Apple Mail on iOS 9 seems to now have a new zooming mecanism that will force your email to fit depending on the screen's width. And it's pretty bad. Basically, if you try to position any content blocks next to each other horizontally, and the sum of their width is bigger than the width of your device's screen, Apple Mail will now wrap your content blocks below each other. So if you have the following…

<div style="width:600px; font-size:0;">
    <img src="image1.jpg" width="300" />
    <img src="image2.jpg" width="300" />
</div>

Apple Mail will ignore your width:600px;, and place the second picture below the first one. Here's an example of the same code seen on Apple Mail in iOS 8 and Apple Mail in iOS 9.

Fortunately, this can be avoided by using min-width instead of width. From my tests, this doesn't seem to have a lot of impact on already optimized responsive layouts. However, unexpected things happen with fixed width desktop sized layouts, like with this email from Microsoft.

General sibling selector bug

A bug with interactive emails and the general sibling ~ selector. Apple Mail seems to ignore a rule with a ~ when used with a :hover or :checked selector. This is typically required for interactive emails. This impacted Nest interactive emails. After talking about it with Eric L. from Nest, we found a solution by using this hack recently highlighted by FreshInbox. So the good news is that we should easily be able to get around this bug. But what's worrying me is that this is a WebKit bug supposed to be fixed in as far as Safari 5.1. I hope this is the only regression we'll see…

No Snap Points.

iOS 9 supports a new CSS feature, Snap Points that allows you to create dynamic scroll that will snap to precise points you determinate. While this works great in Safari, I've never been able to make this work in Apple Mail. This might be in part due to the new zooming mecanism previously mentioned that seems to break CSS overflows. This is too bad because I was really looking forward using this in emails.

Still no <video> support

As previously reported on the first iOS beta, Apple Mail still can't play videos. The button is there, but clicking on it doesn't do anything.

---

We're still a couple of months before iOS 9 gets released to the public. I hope these few bugs will be fixed (even though I have few hopes given the history of the video bug). You can try the public beta (even if you don't have a developer account). I'd love to have your feedback if you have found any other interesting things.