White lines appearing next to custom mj-social-elements

[fac42]

Describe the bug
White lines/bars appearing next to mj-social-element(s) when using custom icons.

To Reproduce
Steps to reproduce the behavior:

1. Grab test code from here
2. Copy outputted HTML to EmailOnAcid and preview renders.
3. Issue appears to only affect iOS devices at certain resolutions (iPhone 7 and X, iPad)

Expected behavior
Social Icons should render properly (without lines adjacent to them)

MJML environment (please complete the following information):

• OS: Windows 10
• MJML Version: 4.2.1 (latest)
• MJML tool used: MJML CLI + Visual Studio Code

Email sending environment (for rendering issues):

• N/A

Affected email clients (for rendering issues):

• Email Client: Default iOS/Outlook
• OS: iOS 10 (iPad), iOS 11 (iPhone 7/X)

Screenshots
Rendering Issue example on iPhone 7, iPhone X (default client/Outlook)
https://i.imgur.com/mqUKn3m.png
Rendering Issue example on iPad
https://i.imgur.com/CF0eSZ9.png

Additional context
I was doing some preliminary render testing and noticed this issue, however this only occurs in certain iOS clients (according to EoA). Outlook and other mobile/desktop clients render fine. I think I've found a workaround for the iPad issue by inlining a 'display: block;' on the tag, but it doesn't solve the white line issue unfortunately. I've attempted to create an mj-class with a display:block attribute but it doesn't seem to apply to the tags within mj-social.

[kmcb777]

Hi @fac42 thanks for reporting this,
we frequently see these kind of thin white lines problems, it seems clients sometimes mess up with width calculation or image resizing, and you get an empty 1px line, showing the background color. Here it could be related to your images size being 60x61

The reason why it's actually a problem here is that you set a background-color on your mj-social-elements that is not the color of your images. On this component, background-color is supposed to be used to fill your icons transparent areas. Since your images have no transparency, just don't specify a background color and it renders fine. (actually with no background-color i still get a blue line on a few clients, on the left of the first icon, so give this first social-element the same background-color as the mj-section and here it's perfect on all clients)

Also i'll check if the ipad bug is consistent and if your display: block; can be used as a fix 👍

[fac42]

@kmcb777
Thanks for the detailed response! Do you think if the widths and heights of the social icon assets were 60x60, the issue wouldn't appear at all? Unfortunately these are the sizes of the assets I have to work with.

I've implemented the colour fix you mentioned and it seems to have fixed the issue on the renders I had on EoA. However, I noticed that a default background colour is applied to mj-social-element when none is specified (the white bar below the icons then takes on that colour instead).

Out of curiosity, is there a reason that the global style/CSS for image doesn't include a display: block; property? Is it because it might cause weird behaviour across all images in a template?

[iRyusa]

Well it's weird that you see such behavior in iOS, i've seen such only on Android 🤔

Did you try to minify the file before sending?

I think we already use the display: block on mj-image so we can add it safely.

[fac42]

@iRyusa
I didn't minify the file, only beautified it then submitted it to EoA for testing. Does this make a difference?

Also here are the global rules for img in the compiled template:

img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
}

[iRyusa]

Yeah there's a lot of potential issue if you don't minify the output before sending

[fac42]

@iRyusa
Okay thanks for letting me know; I'm actually having a separate issue currently but I'm not sure if I should make a new issue ticket. Essentially I have two images side by side (130px + 470px) and I'm trying to force them to not go full width on mobile screens, so on both desktop and mobile they will stay in the same position. If I put each into their own column, they stack, which is what I don't want. Is this possible?

[iRyusa]

That's the default behavior of column :) you should take a look at mj-group (note that it requires minification in order to work on ios)

[fac42]

@iRyusa
Thanks, I'll take a look at that component! Is there an IRC/Slack/Discord or something I can contact the team with for additional questions?

[iRyusa]

https://slack.mjml.io/ 👌