This week a client brought an unusual rendering problem to the CALM team. In the iOS native Mail app the email was appearing very broken, with images and content layered and floating on top of each other. iOS is generally a very easy going email renderer, supporting a ton of modern CSS and standard HTML. So when this issue was brought to our attention, it was baffling to say the least.
The email itself was very simple, basically a text preheader, a series of images stacked in tables stacked, and a footer. At the client’s request, we coded the images in the email without a defined height. It is generally best practice to define a height for an image, however in this case, leaving the height to be computed enables the client to easily update the images at the last minute.
We dug into the problem right away. After ruling out a syntax error, things got interesting. After some troubleshooting, we discovered that iOS Mail in iOS 7-9 on the iPhone 5s and iPhone 6 when confronted with images without a defined height and no other elements to define their height loses its mind and tries to layer them on top of each other.
This is the simplest example we could contrive: two images in the body of an HTML document without a defined height. (The opacity is set so that we can see how iOS is layering the images.)
Litmus: https://litmus.com/builder/b5e2291
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head></head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/j5RP8TZ.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> <img src="http://imgur.com/orlJvEm.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> </body> </html> |
In this example, we’ve wrapped the two images in a container table and that seems to have solved the problem.
Litmus: https://litmus.com/builder/8e69941
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head></head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/j5RP8TZ.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> <img src="http://imgur.com/orlJvEm.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> </body> </html> |
However, what happens if we split the two images into their own tables.
Litmus: https://litmus.com/builder/12ac542
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head></head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/j5RP8TZ.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/orlJvEm.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> </body> </html> |
Everything appears fine, but if we add some text at the same level as the container tables, things break again.
Litmus: https://litmus.com/builder/e6a6df4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head></head> <body> Some text at root level <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/j5RP8TZ.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/orlJvEm.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> </body> </html |
The simplest and most reliable solution we settled on is to make just sure our content is wrapped in a container table. This is generally best practice anyway and perhaps why we’ve not seen this problem before.
Litmus: https://litmus.com/builder/a307451
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head></head> <body> Some text at root level <table cellspacing="0" cellpadding="0"> <tr> <td> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/j5RP8TZ.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="http://imgur.com/orlJvEm.jpg" width="600" border="0" alt="" style="display:block; opacity:0.5;" /> </td> </tr> </table> </td> </tr> </table> </body> |
We will keep exploring this error and will post any updates. Please post a comment with any questions or solutions that you have found.