ReactP5Wrapper has additional pixels in height about react HOT 3 CLOSED

I can't reproduce this locally. The only thing I can think of is that the viewport is somehow not maintaining the aspect ratio for some reason.

Can you show me the css-box-model for the canvas, canvas wrapper div and your own div?

from react.

Closing due to inactivity.

from react.

I also ran into the same issue.

• I started with a p5.createCanvas 300x300 px, and the div that contained the Sketch was also set to height 300px.
• However, the ReactP5Wrapper component ended up with a height of 304px.
• I tried looking around in the CSS, but I couldn't spot anything that might be causing it either in my own code, nor in react-p5. That said, I might not have looked at the right places.
• I'm on macOS 14.0. I'm using Gatsby with styled components. I was testing on Chrome, but I also saw the same behaviour on Safari when I checked.

I also found a workaround - setting display: flex on the container of ReactP5Wrapper made the extra pixels go away (You can see an example here - https://github.com/mnvr/mrmr.io/blob/main/pages/ai-religion/components.tsx#L59-L64).

Anyways, I'm not actually sure if this is a library issue or something else that's wrong, but I just thought I'll mention that I also faced this, and also mention the display: flex a hack to workaround the issue.

ps. Thanks for the great library, it's a pleasure to use this!

from react.