processing
Scrolls in example code output frame seems unnecessary
Most appropriate sections of the p5.js website?
Reference
What is your operating system?
Windows
Web browser and version
chrome://133.0.6943.143
Actual Behavior
When we run the example codes - https://p5js.org/reference/p5.Camera/centerX/ https://p5js.org/reference/p5/arc/ https://p5js.org/reference/p5/triangle/ etc There comes an unwanted scroll in the small window, making it even more smaller and makes it hard to see what is actually happening
- images
Expected Behavior
There shouldn't be any scrolls even after running the code if not necessary , the output frame should look same before and after pressing the run button like -
Steps to reproduce
- onto your chrome browser (this issue specifically happening on chrome)
- go the urls mentioned above
- locate to any example codes
- click on run button - you can see the scrolls
Would you like to work on the issue?
yes
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
https://github.com/user-attachments/assets/6215b557-8b6d-4150-be2b-d76891d6011e
And with small one line of code change in CSS, i guess the issue is resolved
Behavior after making changes
https://github.com/user-attachments/assets/3ab29f82-a662-42d8-9859-41acdca7da88
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.
https://github.com/user-attachments/assets/41b2dcfd-cd45-4068-8617-e1723df14bc7
@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!