mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
17.08k stars 960 forks source link

Background image breaks on high resolution screen #518

Closed SvenVdv closed 6 years ago

SvenVdv commented 7 years ago

The next code seems to break on a 4K screen in Outlook 365. It renders a square field of 200px x 200px (I'm guessing). It is completely fine on a regular screen.

<mj-section background-color="#ffffff" background-url="http://i.imgur.com/6GScU0Q.jpg" padding-bottom="27" padding-top="0">
          <mj-column width="100%" vertical-align="middle">
            <mj-text align="center" color="#000000" font-family="Georgia, 'Times New Roman', serif" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              <p><span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);"><span style="font-size: 16px;"><br></span></span></span></p>
              <p><span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);"><span style="font-size: 16px;"><br></span></span></span></p>
              <p><span style="font-size: 27px;"><a href="https://mjml.io" style="text-decoration: none; color: inherit;"><span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);">Even checken ...</span></span></span></p>
              <p><span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);"><span style="font-size: 16px;"><br></span></span></span></p>
              <p><span style="font-weight: bold;"><span style="color: rgb(255, 255, 255);"><span style="font-size: 16px;"><br></span></span></span></p>
            </mj-text>
          </mj-column>
        </mj-section>

[EDIT] Screenshot: screenshot_bug

Any idea what might be the problem and how to fix it?

iRyusa commented 7 years ago

Hey @SvenVdv !

Can you provide a screenshot about the issue please ?

Thanks !

iRyusa commented 7 years ago

Hey @SvenVdv is this still the case in MJML 3.3 ?

SvenVdv commented 7 years ago

@iRyusa Yes, it still is 😄

iRyusa commented 6 years ago

We slightly changed the VML in MJML4 (beta2 is available)

Would be nice if you're able to test it out to see if the new VML handle this better

kmcb777 commented 6 years ago

I couldn't reproduce the issue on a 4k screen on outlook.com (which is supposed to have the same render engine as outlook 365) so it was probably fixed in mjml4. It could be specific to outlook365, so if you can test this again it would be great @SvenVdv (if you're still around, this issue is a bit old) :)

SvenVdv commented 6 years ago

I got upgraded to an iMac 😄 So no 4K Outlook 365 anymore. Maybe anyone else can check this?

kmcb777 commented 6 years ago

Since we can't reproduce, and there has been many changes since mjml3, i'll close this one, feel free to reopen if you can reproduce