Locking the document in the safari browser

Hi
I ran into a problem in the simple code below, which I display on my iPhone iOS 13.7
https://editor.p5js.org/Michal8705/sketches/tjf-AEwVs

When I open a window in chrome and try to lower the pages with a touch, the window remains static (correct behavior)

image

However, when I do the same in Safari, the document and the Canvas object go down and it goes back to the edge of the screen when the touch event ends

Anyone know how to enforce a static page display behavior, as in the case of Chrome? The current behavior is problematic when handling touch events in code. Maybe it should be some tag in index.html?

Hi! Welcome to the forum!

As a reference here is a direct link for the fullscreen (presentation) version of your sketch https://editor.p5js.org/Michal8705/present/tjf-AEwVs

I don’t have the same issue on my iPhone (13.5.1), though. Nevertheless I know that iOS Safari’s height is a bit sketchy and there are some workarounds:

1 Like

Hi, thank You for your answer.

Over the weekend, I will check your suggestion and inform, what the effects were.

Sorry for the delay in answering, but other responsibilities have consumed me. However, today I had the opportunity to thoroughly test the proposed solution. Everything works great! Thank you again - my problem is solved!