diff --git a/example/example-dev.html b/example/example-dev.html
index f8687184..2a6900f1 100644
--- a/example/example-dev.html
+++ b/example/example-dev.html
@@ -12,7 +12,7 @@
   <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
   <link href="assets/demo.css" rel="stylesheet">
   <script src="assets/json-preview.js"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
 </head>
 <body>
   <script>
diff --git a/src/components/utils/popover.ts b/src/components/utils/popover.ts
index 2afc2897..c61a9a00 100644
--- a/src/components/utils/popover.ts
+++ b/src/components/utils/popover.ts
@@ -4,6 +4,7 @@ import Flipper from '../flipper';
 import SearchInput from './search-input';
 import EventsDispatcher from './events';
 import { isMobileScreen, keyCodes, cacheable } from '../utils';
+import * as scrollLocker from './scroll-locker';
 
 /**
  * Describe parameters for rendering the single item of Popover
@@ -197,7 +198,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     }
 
     if (isMobileScreen()) {
-      document.documentElement.classList.add(Popover.CSS.documentScrollLocked);
+      scrollLocker.lock();
     }
   }
 
@@ -211,7 +212,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     this.flipper.deactivate();
 
     if (isMobileScreen()) {
-      document.documentElement.classList.remove(Popover.CSS.documentScrollLocked);
+      scrollLocker.unlock();
     }
   }
 
diff --git a/src/components/utils/scroll-locker.ts b/src/components/utils/scroll-locker.ts
new file mode 100644
index 00000000..b550323d
--- /dev/null
+++ b/src/components/utils/scroll-locker.ts
@@ -0,0 +1,34 @@
+
+/**
+ * Stores last scroll offset
+ */
+let scrollPosition = null;
+
+/**
+ * Name of the class applied to html element to lock body scroll
+ */
+const scrollLockedClassName = 'ce-scroll-locked';
+
+/**
+ * Lock body element scroll
+ */
+export function lock(): void {
+  scrollPosition = window.pageYOffset;
+  document.documentElement.style.setProperty(
+    '--window-scroll-offset',
+    `${scrollPosition}px`
+  );
+  document.documentElement.classList.add(scrollLockedClassName);
+}
+
+/**
+ * Unlocks body element scroll
+ */
+export function unlock(): void {
+  document.documentElement.classList.remove(scrollLockedClassName);
+
+  if (scrollPosition !== null) {
+    window.scrollTo(0, scrollPosition);
+  }
+  scrollPosition = null;
+}
\ No newline at end of file
diff --git a/src/styles/ui.css b/src/styles/ui.css
index da65fc37..eac97648 100644
--- a/src/styles/ui.css
+++ b/src/styles/ui.css
@@ -128,11 +128,13 @@
   }
 }
 
-.ce-scroll-locked, .ce-scroll-locked > body {
-  height: 100vh;
+.ce-scroll-locked {
+  height: calc(100vh  + env(safe-area-inset-bottom));
+}
+
+.ce-scroll-locked > body {
   overflow: hidden;
-  /**
-   * Mobile Safari fix
-   */
-  position: relative;
+  top: calc(-1 * var(--window-scroll-offset));
+  position: fixed;
+  width: 100%;
 }
\ No newline at end of file
