diff options
| author | Zarino Zappia <mail@zarino.co.uk> | 2018-03-27 13:20:19 +0100 |
|---|---|---|
| committer | Zarino Zappia <mail@zarino.co.uk> | 2018-03-27 14:40:42 +0100 |
| commit | e73ce8c4b11d01bf4c6e9ed8a126fd5b6425722b (patch) | |
| tree | bdcba963b3cf858711396d95ac4de3fec9eb9a53 | |
| parent | d959ce5f2e3e3eebab7a65beec183d1c541c3902 (diff) | |
Fix Mac / iOS mail full-width email layout bug
dcc5926 simplified the HTML email layout and styling, but introduced a
bug in Mac and iOS Mail (both of which use Safari to render emails)
where the central "column" of the layout would expand beyond its 620px
maximum width if your window/screen was big enough to let it.
As far as I can tell, this is a bug in Safari – it treats empty table
cells as if they aren’t there, meaning, in our layout, they no longer
"pushed" against the sides of the central column, allowing it to expand
to the full width of the parent (the window).
Adding a non-transparent background-color to the cells forces Safari to
handle them correctly, so we set a background-color that matches the
body background, to effectively make the cells invisible, while still
giving them enough "layout" to trick Safari into rendering them.
A fun quirk here is that, with the background-color hack in place,
Safari will no longer allow the cells to occupy zero width. Even when
the screen is the same width as (or narrower than!) our central column,
Safari ensures that the spacer cells maintain at least a 1px width,
resulting in a 1px dark grey "border" down the sides of the email.
Seems Safari won’t let you have it both ways – either the cells are
there or they aren’t ;-)
To avoid this "border", we only apply the background-color when we know
the window is wider than 620px. That way, the spacer cells will collapse
to zero width on narrow screens (because of the Safari bug) and will
expand to occupy the space you’d expect on wider screens (because of our
background-color hack).
Fixes #1928 (again).
| -rw-r--r-- | templates/email/default/_email_bottom.html | 6 | ||||
| -rw-r--r-- | templates/email/default/_email_top.html | 12 |
2 files changed, 12 insertions, 6 deletions
diff --git a/templates/email/default/_email_bottom.html b/templates/email/default/_email_bottom.html index 0b2c0b697..4967dfaa2 100644 --- a/templates/email/default/_email_bottom.html +++ b/templates/email/default/_email_bottom.html @@ -1,12 +1,12 @@ </tr> </table> </th> - <th></th> + <th class="spacer-cell"></th> </tr> </table> <table [% wrapper_table %] style="[% wrapper_style %]"> <tr> - <th></th> + <th class="spacer-cell"></th> <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint"> [%~ IF email_footer %] [% email_footer %] @@ -14,7 +14,7 @@ This email was sent automatically, from an unmonitored email account. Please do not reply to it. [%~ END %] </th> - <th></th> + <th class="spacer-cell"></th> </tr> </table> </body> diff --git a/templates/email/default/_email_top.html b/templates/email/default/_email_top.html index d9e3becf2..75dec6788 100644 --- a/templates/email/default/_email_top.html +++ b/templates/email/default/_email_top.html @@ -36,21 +36,27 @@ width: auto !important; } } + + @media only screen and (min-width: [% wrapper_max_width %]px) { + .spacer-cell { + background-color: [% body_background_color %]; + } + } </style> </head> <body style="[% body_style %]"> <table [% wrapper_table %] style="[% wrapper_style %]"> <tr> - <th></th> + <th class="spacer-cell"></th> <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint"> [% email_summary %] </th> - <th></th> + <th class="spacer-cell"></th> </tr> </table> <table [% wrapper_table %] style="[% wrapper_style %]"> <tr> - <th></th> + <th class="spacer-cell"></th> <th width="[% wrapper_max_width %]" style="[% td_style %] min-width: [% wrapper_min_width %]px;" id="main"> <table [% table_reset %]> <tr> |