Tutorial

Wrong CSS in native IOS Mail App / Safari on iPhone? IOS is the new Internet Explorer. [FIX / RANT]

Yes, IOS / Safari is the new internet explorer. Amount of time I spend on debugging various IOS / Safari related bugs is incredible. It is such a bummer.

Today I spent like 5 hours debugging simple wrapping of elements on iPhone IOS native mail app. This text-wrapping problem was occuring only in this native app, it was not present on any other platform, not even on desktop version of native Mac OS mail app which I thought uses the same WebKit core to render elements. 

This is how it looked like:

shitty ios

shitty IOS 2

Pridal/a lubo dňa Št, 11/03/2022 - 02:38
First solution

Add the following lines to your <head> of the email template:

<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Second solution

For some incredible stupid reason, if you do not have Doctype specified above your email template, IOS if fails to recognise @media queries. So add the following line above your HTML email template:

<!DOCTYPE html>

Note: @media queries work ONLY if you have your doctype in exactly the format above, it does not work if you have some other attributes there! (Yes, it is THAT stupid)

Third solution

It took me several hours of debugging, sending emails, waiting for email client to notice the email and after each change just spending incredible amounts of time to this, or rather I stumbled upon this thread.

IOS is so stupid, display: block or basicly any styling does not work on <td> elements (from which tables are consisted, right? And we are still doing email templates like it's '90s, table layouts), and you need to

Replace all <TD> elements with <TH> elements

and your CSS will magicly work. @media queries AND inline-css styles DO NOT work on <TD> elements.

Why?

Because IOS / Safari is the new Internet Explorer!

[Yes, this was rant, but imagine spending so many hours on something that stupid]

Might interest you

Tutorial
Ever wondered how to have a stable installation of Drupal 8 with a lot of modules and in need of applying a patch? If you apply it manually…
Tutorial
There is no error in logs, and your Drupal 8 website is writing a message: The website encountered an unexpected error. Please try again…

Recommended

Article
32 views
For the past few days I am trying to comprehend why / how this blockchain even gained it'…
Tutorial
95 views
This sketch is quite easy, I used Arduino Nano with OLED 0.96″ display 128×64 resolution…
Tutorial
157 views
While working on a fairly complex website with very complex views setup, including tens…
Tutorial
14 views
In this case we have two options, either we use hook_user_presave() or we can create new…
Tutorial
15 views
When using Swiftmailer under Drupal 8 / 9 it automatically sets the headers for sender to…
Tutorial
7 views
Yes, IOS / Safari is the new internet explorer. Amount of time I spend on debugging…
Tutorial
43 views
There is a very handy function in Drupal 8 / 9, allowing developers refresh view when…
Tutorial
22 views
Often, when doing SEO checkups, SEO specialist come up with adding Schema.org…
Tutorial
174 views
I needed to test my contracts against USDC contract, specifically I needed ERC-721 mint…
Tutorial
85 views
If you are a newbie like I am and struggling with setting the proper MYSQL my.cnf config…
Tutorial
25 views
I had trouble to set this up properly, because documentation is quite misleading or often…
Article
72 views
As the title says, DO NOT in any circumstances install ANY bitcoin price extension to ANY…
Tutorial
278 views
This is (or should be) a working example of sending some Ether between two addresses.…
Module
45 views
This list was fetched from Zapper, with their /v1/token-list endpoint. Which you can…
Tutorial
143 views
In the last months I am being pretty much bombarded by my clients with asking what…