Hey folks! This appears to now be resolved in the latest build - Version 2212 (Build 15928.20216 Click-to-Run)
On the VML image side (<v:image>), I was able to counter the shift using style="mso-position-horizontal:outside;margin-top:-0.75px" without negatively affecting older builds, but it's not thoroughly tested yet.
Thank you, Erica!
I'm finding this works about 90% of the time, but there are still some images where it's being shifted/cut-off even with the align attribute. It seems like images within a short height cell (along with the shorter image) are still being affected, but I can't say it's the height still causing it with absolute certainty.
The other issue is with VML images not being cut off but still being shifted the 1px. While the absolute/relative positioning can be adjusted, it'd only appear correct for affected builds.
On a separate note, Version 2211 (Build 15831.20190 Click-to-Run) has been released and the problem is still present.
This bug affects Version 2210 (Build 15726.20202). Only thing to do right now is provide feedback to Microsoft through Outlook and any other social media means. Their own Microsoft Store emails are breaking as well, so you'd think they'd want to get this fixed sooner than later.
VML images don't get the cut off, however, they're shifted 1px right and 1px down. Repositioning them isn't a fix either since it'd cause a 1px display issue in previous Outlook builds.
Use VML to overlay the image over the original. Note: don't use px or pt in the height/width/top/left of the v:image.
<td><!--[if gte mso 9]><v:image src="https://lorempixel.com/600/400/" style="position:relative;top:0;left:0;width:600;height:400;z-index:2;"></v:image><![endif]--><img src="https://lorempixel.com/600/400/" alt="" width="600" height="400" border="0" style="border:0; width:100%;display:block;" /></td>
or if you need it linked:
<td><!--[if gte mso 9]><v:image src="https://lorempixel.com/600/400/" href="https://www.google.com" style="position:relative;top:0;left:0;width:600;height:400;z-index:2;"></v:image><![endif]--><a href="https://www.google.com" target="_blank"><img src="https://lorempixel.com/600/400/" alt="" width="600" height="400" border="0" style="border:0; width:100%;display:block;" /></a></td>
Dev, here's the latest that I've been using that addresses some line height and odd spacing that may occur in some email clients:
<span style="white-space:nowrap; display:inline-block;">www‌<span style="font-size:1px; line-height:4px; display:none;"> </span>.deadlink.‌<span style="font-size:1px; line-height:4px; display:none;"> </span>com.</span>
In the above, the following code is what's used in between the 'break points' to keep it from linking:
‌<span style="font-size:1px; line-height:4px; display:none;"> </span>
and then, depending on the length of the entire link, I use the nowrap/inline-block spans to keep certain text together.
Hi Sheik, I tried your suggestion but it didn't work.
Simple way to override macOS/iOS dark mode colors:
For background colors, use a one color gradient:
background-image: linear-gradient(#ffffff,#ffffff)
For text, use this along with your standard color style:
-webkit-text-fill-color: #000000 !important;
For borders, include original border style plus...
-webkit-border-before: 2px solid #000000 !important; (use for top border)
-webkit-border-after: 2px solid #000000 !important; (use for bottom border)
-webkit-border-start: 2px solid #000000 !important; (use for left border)
-webkit-border-end: 2px solid #000000 !important; (use for right border)