CODEWITHSUNDEEP
htmlhtml-email
Tom
Tom

Reputation: 459

HTML email Dark Mode iOS and Gmail

Racking my brain regarding gaps in html email in dark mode. Specifically when three images are sitting next to each other in a table.

<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="230" align="right"><a href="#"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_02?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;"  width="230" height="355" border="0" /></a></td>
      <td width="189"><a href="#"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_03?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;"  width="189" height="355" border="0" /></a></td>
      <td width="231" align="left"><a href="#"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_04?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;"  width="231" height="355" border="0" /></a></td>
    </tr>
  </tbody>
</table>

Renders a gap on the right hand column Black gap on right

When you force the scale down to 640px, scaling all images proportionately, it removes the gap. Any idea why this would be?

<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr style="background-color:#FFFFFF">
      <td width="226" align="right" bgcolor="#FFFFFF"><a href="#" style="display:block"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_02?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="226" height="355" border="0" /></a></td>
      <td width="186" bgcolor="#FFFFFF" ><a href="#" style="display:block"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_03?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="186" height="355" border="0" /></a></td>
      <td width="228" align="left" bgcolor="#FFFFFF" ><a href="#" style="display:block"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_04?scl=1" alt="Overland"style="display: block !important; padding: 0 !important; margin: 0 !important;" width="228" height="355" border="0" /></a></td>
    </tr>
  </tbody>
</table>

top is at 640px scaled, bottom is at 650 unscaled

Upvotes: 1

Views: 568

Answers (1)

HTeuMeuLeu
HTeuMeuLeu

Reputation: 2751

This has nothing to do with dark mode but it is a long lasting rounding bug in WebKit (Safari’s rendering engine used throught all of iOS) and Blink (Chrome’s rendering engine also used in Android). You should be able to reproduce this on desktop by zooming in or out of your email in either Chrome or Safari. Dark Mode makes this more visible because you get a dark line instead of a white one.

As for why it happens with your table at 650px but not 640px, let's do a bit of maths. Based on your screenshot, your screen size is 1080px wide. Minus the 48px gutter on each side imposed by your email client, that makes a viewport of 984px for your email. At 640px, your email only needs to be scaled up by 1.5375 times. At 650px, your email needs to be scaled up 1.513846153846154… times, which isn't a round count and will inevitably create white lines.

The solution isn't to change your email's width, though, as this problem will inevitably rise at other screen sizes. My advice would be to make sure to use relative units (like %), and code your layout so that all your columns are the same widths. (So for a three columns layout, each "cell" would be 33.333333%).

Upvotes: 2

Related Questions