We recently come across a strange email client rendering issue in Mail on the iPhone and iPad – hairline borders are appearing in HTML email designs with table layouts. These borders are sometimes barely visible, but often they can be fairly pronounced, especially at certain zoom levels (see picture). What makes this bug so hair-pullingly tricky is that the borders appear and disappear as you zoom in and out of the HTML email, which can quickly take a design from passable, to impossible.
When do these borders appear?
We’ve found that the borders appear when a background color or image is applied to individual table cells. In this example, we’ve nested a table with white cells (eg.
bgcolor=#FFFFFF) in a table with a red background color. As a result, the red is showing through, creating these borders.
Solving the border dispute
To prevent these borders from appearing on the iPhone, you can try:
- Removing background colors or images from individual table rows and cells, and/or;
- Nesting the problematic table in a new table, featuring a background color that matches that of the inner table.
In this example, the red borders disappeared when the white table cells were nested in a 1×1 cell table with a white background color applied… Not an entirely elegant solution, but we’re coding with tables here, right?
It seems like this issue has been floating around well before the release of iOS5, however for some reason, has become fairly visible now. Hopefully Apple takes notice and takes steps to fix this rather obvious rendering glitch, thus restoring their otherwise designer-friendly email client in our good books.
I know, I know, it’s a bit of a downer, this one. To cheer you up, here’s a video featuring levitation and quantum superconductors. Hover boards are on their way…