🐛 Fix sophia iframe height when mobile keyboard is open on IOS

SoftInstigate · Sep 12, 2024 · 20f583d · 20f583d
1 parent 4cded4a
commit 20f583d
Showing 1 changed file with 18 additions and 7 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -57,14 +57,25 @@
  <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
  {% include plausible.html %}
  <script>
- let vh = window.innerHeight * 0.01;
- document.documentElement.style.setProperty('--vh', `${vh}px`);
- console.debug('set css variable --vh =', vh);
+ var lastVH = -1;
+ const w = window.visualViewport || window;
+ document.documentElement.style.setProperty('--vh', `${(w.height || w.innerHeight).toFixed(2) * 0.01}px`);
+ // console.debug('set css variable --vh =', document.documentElement.style.getPropertyValue('--vh'));
 
- window.addEventListener('resize', () => {
- let vh = window.innerHeight * 0.01;
- document.documentElement.style.setProperty('--vh', `${vh}px`);
- console.debug('set css variable --vh =', vh);
+ console.log(w)
+
+ w.addEventListener('resize', () => {
+ const _vh = ((w.height || w.innerHeight) * 0.01).toFixed(2);
+
+ if (lastVH === _vh) {
+ return;
+ }
+
+ lastVH = _vh;
+
+ document.documentElement.style.setProperty('--vh', `${_vh}px`);
+ window.scrollTo({top:0, left:0,behavior: 'instant'});
+ // console.debug('set css variable --vh =', _vh);
  })
  </script>
 </head>