Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mj-hero: background image isn't displaying correctly in Windows Mail #2814

Open
MarionLivet opened this issue Jan 22, 2024 · 6 comments
Open

Comments

@MarionLivet
Copy link

Describe the bug
The background image for mj-hero in fluid-height mode isn't displaying correctly in Windows Mail. The image appears too small and fails to cover the entire hero section.

To Reproduce
Steps to reproduce the behavior:

  1. Open this link from the documentation: https://mjml.io/try-it-live/components/hero/1
  2. Render it to HTML by clicking on "View HTML"
  3. Send the HTML to an email address with Putsmail
  4. See issue in Windows Mail (see screenshot below)

Expected behavior
The background image should render correctly, covering the whole hero section, like in the preview tab of the "try it live" page and in Gmail

MJML environment (please complete the following information):

Email sending environment(for rendering issues):

  • Platform used to send the email: Putsmail

Affected email clients (for rendering issues):

  • Email Client: Mail Version 16005.14326.21778.0
  • OS: Windows
  • Browser: /

Screenshots

What I see in Windows Mail:
B92A0EC3B2EE494C9029DCBE6FB66CB6

What I have in Gmail:
image

And in the preview tab:
image

@iRyusa
Copy link
Member

iRyusa commented Jan 22, 2024

👋

That's weird even the padding is not rendered...

Make sure that this is not checked in putsmail :
Screenshot 2024-01-22 at 10 05 44

Can you check with fixed-height to see if it does the same ?

@MarionLivet
Copy link
Author

Hey 👋

The checkbox is not checked in putsmail

Here's what I have with the fixed-height example from the documentation, it looks the same as fluid-height:
E90BC937E4A74D15A54755ABD8B3521D

@iRyusa
Copy link
Member

iRyusa commented Jan 22, 2024

😬 That's so weird...

Can you try with multiple sections in the email, I recall a similar behavior with only 1 mj-section in this client #2641

@MarionLivet
Copy link
Author

I added 2 sections and the hero still looks broken :(

Gmail:
image

Windows Mail:
with sections

@iRyusa
Copy link
Member

iRyusa commented Jan 29, 2024

Tried to debug this but I don't find out why it doesn't work. It's so weird as it respect the whole padding but only draw the bg for the actual content...
I think Windows Mail wasn't in our test scope in Litmus/EmailOnAcid no one saw this behavior 😞
I wonder what it does with mj-section background-image implem tho

@MarionLivet
Copy link
Author

Thanks for your help!

I don't have access to a Litmus nor a EmailOnAcid account but I had access to a win 10 PC yesterday to do some testing with the fixed-height mode and it looked fine on win 10 but I had the same issue as with the fluid height on win 11.

When testing with a mj-section, I'm getting "The picture can't be displayed" instead of the image. It looks like it's the same issue as #2698

I think for now I'll use the fixed-height mode as a partial solution

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

No branches or pull requests

2 participants