Mjml: image in mj-hero becomes smaller while adding a mj-section after the mj-hero

[rogierslag]

When adding a mj-section below an mj-hero, where the mj-hero has no width defined, an image inside an mj-hero becomes smaller and smaller when more mj-sections are added

Refs https://github.com/mjmlio/mjml/pull/1320#issuecomment-423950858

Reproduction Steps:

Pick the following MJML

<mjml>
  <mj-body background-color="#FAFAFA" width="594px">
    <mj-hero mode="fluid-height" background-color="#335366" background-width="100%" padding="27px 18px">
      <mj-image href="https://magnet.me/?utm_content=magnet-logo" src="https://cdn.magnet.me/images/press/logos/logo_full_white.png" align="center" padding="0px" width="172px"></mj-image>
    </mj-hero>
  </mj-body>
</mjml>

And run in in the try it live version (or a version locally, same result) on MJML 4.1.2

Adding three empty mj-sections below renders the following MJML, and shrinks the image in the hero

<mjml>
  <mj-body background-color="#FAFAFA" width="594px">
    <mj-hero mode="fluid-height" background-color="#335366" background-width="100%" padding="27px 18px">
      <mj-image href="https://magnet.me/?utm_content=magnet-logo" src="https://cdn.magnet.me/images/press/logos/logo_full_white.png" align="center" padding="0px" width="172px"></mj-image>
    </mj-hero>
    <mj-section></mj-section>
    <mj-section></mj-section>
    <mj-section></mj-section>
  </mj-body>
</mjml>

Expected behavior:

Do not shrink an image of another element

Observed behavior:

The image is shrunk for each mj-section added after the first one

Screenshots and GIFs

https://mjml.io/try-it-live/Bko3gIUFm

MJML version:

4.1.2

Email clients the bug is seen on:

Any client

[rogierslag]

Note that whenever a width="100%" is added to the mj-hero all works as expected

[iRyusa]

Thanks for submitting the issue, this one is actually quite funny, as we removed mj-hero-content it dit mess with the image calc that is based on his direct parent sibling.

It will be fixed in MJML 4.3 !