`<td>` not stacking in Outlook iOS

[cossssmin]

Problem

Outlook iOS removes the doctype, which means it renders it in WebKit quirks mode (1, 2).

Since display: block; does not work on <td> in quirks mode, you cannot stack them on mobile through @media queries.

Solution

A workaround is to use <th> instead - display: block; works on this element:

However, one must make sure to reset the font-weight and text-align which default to bold and center in a <th> element.

Other notes

Looking at the list from Which doctype should you use in HTML emails, it sounds like <td> can't stack when using display: block; in the following clients, either:

• Orange (mobile webmail)
• Orange iOS
• SFR iOS

Btw @hteumeuleu, if possible maybe update that table to reflect current Outlook iOS situation.

Note that stacking does work in Outlook in iOS 11 (what Email on Acid uses), but it does not in the latest version (13.3.1)

[pbiolsi]

Shouldn’t most be using inline <div> for this sort of content anyway to ensure proper stacking w/o media queries?

[cossssmin]

This isn't about how people should code their emails 🙂

Coding your email in a certain way does not mean that an email client will suddenly start preserving the doctype. Quirks mode has many more implications than the problem exposed in this issue.

[revelt]

@pbiolsi you probably meant hybrid layouts where shadow tables enforce position side-by-side. That's a very viable alternative, however, it weighs by magnitude more compared to th approach.

Imho this ticket is a proper addition to the list and is very well-written. Hopefully will nudge EoA.

[revelt]

to illustrate what Cosmin said, here's latest Email on Acid device list — notice the Outlook we talk about is missing, there's only older iOS version (which imho is irrelevant as a test platform because iOS 11.4 comprise 1.2% of all i-devices — source https://gs.statcounter.com/ios-version-market-share/mobile-tablet/worldwide):

[hteumeuleu]

EoA's iOS Outlook app is seriously outdated. I asked them about it a few months ago and they replied they use version 2.51.1. (Current version is 4.29.0.)

Also, in the Outlook app, this only happens when using an Outlook-alike email address. If you use a third party email address, your doctype will be respected. See https://www.caniemail.com/search/?s=doctype#html5-doctype-cite-note-1

[hteumeuleu]

I'm under the impression that this is fixed. My test code from caniemail shows an HTML5 doctype support, whether you're using a Gmail or an Outlook account in the Outlook iOS app.

Anyone else can confirm ?

Edit: Upon further testing, looks like the Outlook apps on iOS are now forcing the HTML5 doctype, even if you send your email without a doctype.

[hteumeuleu]

Looks like WebKit is changing its own behavior regarding this: WebKit/WebKit@840ec41