# Locking the document in the safari browser

**URL:** <https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122>\
**Category:** Coding Questions\
**Created:** [May 16, 2021, 2:36pm UTC](https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122 "2021-05-16T14:36:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michal8705](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@Michal8705](https://discourse.processing.org/u/Michal8705)\
**Post date:** [May 16, 2021, 2:36pm UTC](https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122/1 "2021-05-16T14:36:33Z")

</div>

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](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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b38b7ecc3da816ce9fb91e08de66e2fb1e582710.png)

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?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 16, 2021, 4:58pm UTC](https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122/2 "2021-05-16T16:58:53Z")

</div>

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](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:

> **[100vh problem with iOS Safari](https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9)**
>
> The 100vh problem on iOS devices is really annoying, every one knows. I have a simple recipe to solve this problem. Let me show you.

---

<div class="post-metadata">

**Author:** ![Michal8705](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@Michal8705](https://discourse.processing.org/u/Michal8705)\
**Post date:** [May 20, 2021, 7:10pm UTC](https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122/3 "2021-05-20T19:10:55Z")

</div>

Hi, thank You for your answer.

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

---

<div class="post-metadata">

**Author:** ![Michal8705](https://avatars.discourse-cdn.com/v4/letter/m/96bed5/32.png) [@Michal8705](https://discourse.processing.org/u/Michal8705)\
**Post date:** [June 3, 2021, 10:02am UTC](https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122/4 "2021-06-03T10:02:56Z")

</div>

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!