versafix-1: Outlook 2016 Rendering Lines #93

Open
thewibblywobbly opened this Issue Jan 26, 2016 · 15 comments

Projects

None yet

6 participants

@thewibblywobbly

I have read the readme several times and believe I am including all the appropriate information. Please let me know if that is not the case, and I will include what is missing. I am viewing the versafix-1 template in Outlook 2016 on Windows 10. When I view the emails with Outlook 2016, I am seeing lines in the shown email. I am using the online Mosaico editor (the demo editor) to send myself a test email. I am also experiencing this issue with the code I have cloned from github and that is why I tried a test email in the online editor. I am not seeing this issue with other clients I have (Outlook 2010, Gmail and Android Email, MailCatcher in my dev environment also does not display them).

I generated the email below by going to the online demo editor, inserting the blocks I have seen the issue with thus far and used the Test button to send myself a test email.

line_issue

@bago
Member
bago commented Jan 26, 2016

Thank you for the report. Unfortunately Outlook 2016 is not between clients I have access to, and Litmus does not include it in their tests. AFAIK it usually provides results similar to Outlook 2007/10/13 but each outlook version has its own glitches.

I will try to get access to an Outlook 2016 in order to do some tests and see if (and how) we can put workarounds for it.

@bago bago changed the title from Outlook 2016 Rendering Lines to versafix-1: Outlook 2016 Rendering Lines Jan 26, 2016
@bago bago self-assigned this Jan 26, 2016
@tayvano
tayvano commented Jan 27, 2016

This result is the top result in google for "outlook 2016 rendering lines", which is how I arrived here.

Firstly, I'm using a different template (Minty from https://litmus.com/blog/go-responsive-with-these-7-free-email-templates-from-stamplia), but encountering the same issue.

This only in Outlook 2016 (PC). All other Outlooks are fine, including Mac 2016.

I got rid of 2 other lines that were occurring by restructuring. Instead of stacks of

<div class="block">
    <table bg gray>
        <tbody>
            <tr><td>.....content and stuff </td></tr>
        </tbody>
    </table>
</div>

I removed the div, table, and tbody so the s are stacked. That created another gray line (color of the bg), which was then removed by nixing the internal white tables, most likely causing problems in other clients without fixing Outlook 2016.

Helpful link

Now I'm back to square 1 - I'm now going to redo my spacers and see if that has any affect. If I solve this annoying issue, I'll let you know.

If ANYONE figures out the root cause of this and a fix in the meantime, I would be extremely thankful if you pinged me.

PS: @bago - EmailOnAcid just added Outlook 2016 -- they have a free 7 day trial. Wish we tested with Litmus now ;)

@bago
Member
bago commented Jan 27, 2016

"I removed the div, table, and tbody so the s are stacked".

In our case the div is there to make the layout "hybrid" (so it goes from multicolumn to multiline also on Gmail mobile and other mobile webmails not supporting media queries).

Thank you for the EoA link and the hint about their support for Outlook 2016. I used EoA in past, then moved to Litmus when they introduced the "instant previews" (very time saving). Buying outlook monthly is cheaper than EoA or Litmus and gives me real/live results... so maybe I'll buy outlook (they also have 1 month trial).

@tayvano
tayvano commented Jan 27, 2016

Good luck, mate. I basically ended up deleting stuff until the lines disappeared and then using the existing blocks to rebuild what I deleted. Still no idea why it was happening. Maybe spacers? Maybe some random missing mso-bullshit.

@bago
Member
bago commented Mar 24, 2016

Just for reference after I wasted days rewriting the versafix template just to obtain the same issue, I wrote a full blog post with my findings and opened a topic on litmus community:
https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/
https://litmus.com/community/code/4990-outlook-2016-weird-1px-horizontal-lines-showing-up-in-the-body

let's see if someone show up with a workaround!

@tayvano
tayvano commented Mar 24, 2016

@bago :(

We have developed maybe 10-12 email templates in the last couple months and haven't found a solid fix. In fact, we've mostly been making the background color the same as it hides it better. Sometimes they do fail to show up but I have never been able to nail down a concrete reason as to why or why not.

I'm going to be trying out Zurb's new foundation emails that they finally released for the next batch of emails. If not, I'm going to have to hire a subcontractor in Russia or somethin to fight with these. No one is making enough ROI on these flipping emails for me to spend the amount of hours I've been spending on them. So frustrating.

I'll keep you posted.

@scholtes

This is not directly related to this issue, but in case it helps any future readers who chance upon it, here are some quirks Outlook has rendering emails:

  • margin (and similar) properties are often ignored
  • block elements inside inline elements can cause issues (e.g., if you put a ul in a td it might not render consistently)
  • nth-child (and similar) selectors are often ignored
@Rubenvanhoeyveld
Rubenvanhoeyveld commented Sep 14, 2016 edited

Hi @bago,

It's been since March/April since anyone last answered on this issue, so I wanted to ask if this problem is still present. I'm desperately looking for a decent mail template editor and Mosaico looks promising! I'm now testing the online demo (https://mosaico.io/editor.html?0.14#templates/versafix-1/template-versafix-1.html) and I also got the rendering line in Outlook 2016...

@bago
Member
bago commented Sep 14, 2016

This is a known issue in Windows 10 mail and Outlook 2016. THere is no known workaround out there and Microsoft aknowledged it is a bug. Very often you can get rid of a line if you add a new line on a block (it doesn't matter if it is the same block, if it is before or after)... most changes you do to the email will alter the places where the 1px bug happens.. so sometimes by trial-error you can get rid of them.

BTW, I simply started ignoring it. People using Outlook 2016 or Windows 10 Mail is already used to see that weird lines on many emails.

Keep in mind that the lines are coloured the same as the background of the email. So if you use a background color that is the same of your main content then it will be harder to "spot".

@tayvano
tayvano commented Sep 14, 2016

@bago Good to know. We use a lot of blocks now (using Foundation 2 emails to build) and try to use a background color that is content content color as well. Unfortunately for me, my clients don't think "everyone is ignoring the lines now" is a solution. ;)

@bago
Member
bago commented Sep 14, 2016

Well I know.. I have customers that wants to see animated gifs in Outlook, too.. but we can't do miracles.

At the end of this article you can find a Microsoft page acknowledging the issue:
https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/

@voodoo6
voodoo6 commented Nov 16, 2016

Removing align="left" from the last table fixed this for me (thanks to this post for the suggestion – mentioned at the end)

@bago
Member
bago commented Nov 16, 2016

@voodoo6 the post you linked is written by me and I also written the versafix-1 code.. if the align was a good solution I would have added it to the template: altering the align simply changes the places where the lines can appear.. so if you don't have lines you can see lines appearing .. if you have them you can see them disappearing...

This is a weird Outlook bug and Microsoft aknowledged it... as far as I know there is NO real solution to this but doing some little change around in your code/text/sizes/aligns until the lines disappear.

@voodoo6
voodoo6 commented Nov 16, 2016

Thanks for the post @bago, I was close to losing it before I found your suggestion, it was a big help.

Just before I found your post, I tweeted the outlook team asking if they were trying to ruin my life but I now think the development team simply hate us all and get a kick out of finding new ways to make outlook even worse with each release. Surely it's the only logical explanation for these never ending bugs!?

@tayvano
tayvano commented Nov 16, 2016

@voodoo6 I'm guessing their priorities are just elsewhere. How an email renders is like 1% of the code and bugs in any given email client. Random lines aren't 100% reproducible and don't have an affect on security.

....or maybe they're working on gif support. 😂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment