I was trying to reproduce this bug but I'm unable to see scrolls in the example code.
My Chrome version: Google Chrome 133.0.6943.141
OS: Ubuntu 22.04

Yes i understand that this issue is not visible always because this has something to do with zoom level of your window,
try at different zoom levels (generally 60 -75 ),the issue may come
for more insights on this issue, have a look at discord server in contribute section

I have recreated the issue and the issue still persist

Actual behavior

And with small one line of code change in CSS, i guess the issue is resolved

Behavior after making changes

what's your thought @webermayank on this?

Thanks for noticing this, it's just a strange edge case! I can't actually reproduce this bug consistently (but I managed once, so I do know it's happening) but @davepagurek do you see any potential side effects to removing the scrollbars as the fix does? If there are no side effects then it should be alright to use overflow property to resolve this.

I think we still need scroll bars in some cases currently: some examples involving the DOM end up making things off canvas (e.g. https://p5js.org/reference/p5/input/) and scroll bars are (currently) necessary. Arguably in those cases, we still shouldn't have scroll bars, and the sketch preview should be big enough to fit them, but in that case we'd have to do more than just set overflow: hidden. If it's not feasible to figure out from the iframe itself how big its contents should be, we could possibly add a way to specify that info in maybe a comment like // @size 300 400 in the example source that we can parse?

It seems like this issue also talks specifically about scroll bars for sketches that already have correctly-sized frames, but where scroll bars appear when zoomed in at certain levels. I think another valid solution could be to figure out how to remove scroll bars in just those cases, but still keeping scroll bars for the case where something is truly outside of the canvas and needs to scroll.

As the @davepagurek described, the iframe should recognize the canva(content) size and if there is need of scrollbar, it should be there else not.

By removing the width & height of iframe which was taken a props from the canva size described in code for sketch, and giving iframe its own width i.e. width: 100% & height: 100% - resolve the issue. As the iframe is enclosed with parent div having width & height of canva coded, iframe follows the size of parent div and scrollbar is displayed only when needed.

@ksen0 @davepagurek this is the desired solution we wanted right ?

@Its-sunny69 thanks for the update, it's looking quite good! I made a minor comment on the PR, and then I'll test it and merge. It may take a few days to test as there is a lot of ongoing work, but thanks for figuring this out!