A margin-top style on a sub-element clips the element

[Fil]

Expected Behavior

<div id="zone">
      <div>
        <hr style="margin-top: 1em">
        <h3>Here’s the thing:</h3>
        <p>This part will be clipped!</p>
      </div>
</div>

<button onclick="htmlToImage.toCanvas(document.getElementById('zone')).then((canvas) => document.body.appendChild(canvas));">To image</button>

The paragraph should be part of the generated image

Current Behavior

The paragraph is clipped, because of the margin-top on the hr, which shifts the whole image down.

Possible Solution

I haven't found a good solution, so I'm scouring the tree for any margin-top and if there is one, I add a div at the bottom of the element with a mix-height of 0.1px.

Steps To Reproduce

See above.

Additional Context

here's the result I'm seeing:

Your Environment

• html-to-image: https://unpkg.com/html-to-image@1.11.1/dist/html-to-image.js
• OS: macOS Ventura 13.4.1 (22F82)
• Browser: Chrome 116.0.5845.110

[vivcat[bot]]

👋 @Fil

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.