diff --git a/index.html b/index.html
index a51fafd..ab8c224 100644
--- a/index.html
+++ b/index.html
@@ -146,6 +146,29 @@
 		
 		
 		<div id="keyboard" onclick="$('#text').focus()"></div>
+
+
+		<!-- safari disclaimer (centered vertically) -->
+		<div id="disclaimer" hidden style="
+			position: fixed;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			height: 46px;
+			padding: 10px 20px;
+			background-color: #333;
+			color: white;
+			font-size: 12px;
+			line-height: 20px;
+			text-align: center;
+			opacity: 0.8;
+			z-index: 1000;
+			">
+			<p style="margin: 0;">
+				<span style="font-weight: bold;">Safari</span> is not supported yet.
+				<br>
+				Please use <span style="font-weight: bold;">Chrome</span> or <span style="font-weight: bold;">Firefox</span>.
+			</p>
 		
 	</body>
 	</html>
diff --git a/script.js b/script.js
index 857978c..e0a611c 100644
--- a/script.js
+++ b/script.js
@@ -49,6 +49,23 @@ $(document).ready(() => {
   //   console.log(e.keyCode)
   // });
 
+  let ua = navigator.userAgent.toLowerCase()
+  let safari = ua.indexOf('safari') != -1 && ua.indexOf('chrome') == -1
+  $('#disclaimer').toggle(safari)
+
+  // dev toggle override
+  // safari = !safari
+
+  $('html').css('--bg', safari ? '214, 216, 221' : '16, 16, 16')
+  $('html').css('--fg', safari ? '214, 216, 221' : '240, 240, 240')
+  $('html').css('--key', safari ? '255, 255, 255' : '48, 48, 48')
+  $('html').css('--key-height', safari ? '40px' : '48px')
+  $('html').css('--key-radius', safari ? '5px' : '8px')
+  $('html').css('--txt', safari ? '0, 0, 0' : '255, 255, 255')
+  $('html').css('--txt-size', safari ? '22px' : '26px')
+  $('html').css('--field', safari ? '255, 255, 255' : '0, 0, 0')
+  $('html').css('--gap', safari ? '6px' : '5px')
+
 
   let url = '/tungs.txt'
   $.get(url, function (data) {
@@ -357,26 +374,6 @@ var lastRender = 0
 var time = 0
 window.requestAnimationFrame(loop)
 
-
-
-
-
-let ua = navigator.userAgent.toLowerCase()
-let safari = ua.indexOf('safari') != -1 && !(ua.indexOf('chrome') > -1)
-
-// dev toggle override
-// safari = !safari
-
-$('html').css('--bg', safari ? '214, 216, 221' : '16, 16, 16')
-$('html').css('--fg', safari ? '214, 216, 221' : '240, 240, 240')
-$('html').css('--key', safari ? '255, 255, 255' : '48, 48, 48')
-$('html').css('--key-height', safari ? '40px' : '48px')
-$('html').css('--key-radius', safari ? '5px' : '8px')
-$('html').css('--txt', safari ? '0, 0, 0' : '255, 255, 255')
-$('html').css('--txt-size', safari ? '22px' : '26px')
-$('html').css('--field', safari ? '255, 255, 255' : '0, 0, 0')
-$('html').css('--gap', safari ? '6px' : '5px')
-
 window.addEventListener("beforeinstallprompt", (e) => {
   console.log('beforeinstallprompt')
   // // Prevent Chrome 67 and earlier from automatically showing the prompt
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..027a11a
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class="notranslate" translate="no">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+		<title style="display: none;">test</title>
+	</head>
+
+	<body>
+    <textarea id="text" rows="10" style="width: 100%;" onclick="">test</textarea>
+    <div id="shelf"></div>
+  </body>
+
+</html>
+
+<script>
+  setInterval(() => {
+    let kbHeight = window.innerHeight - window.visualViewport.height
+    kbHeight -= 1
+
+    document.getElementById('shelf').style.bottom = kbHeight + 'px'
+    // document.getElementById('text').style.height = (window.visualViewport.height - kbHeight) + 'px'
+  }, 10)
+
+  // function selectText() {
+  //   // flash the textarea to stop ios from scrolling
+  //   let textarea = document.querySelector('textarea')
+  //   textarea.style.display = 'none'
+  //   setTimeout(() => {
+  //     textarea.style.display = 'block'
+  //     // select the text
+  //     textarea.select()
+  //   }, 10)
+  // }
+</script>
+
+<style>
+  html, body {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+
+    margin: 0;
+    padding: 0;
+    background-color: #79394f;
+    color: #fff;
+    font-family: sans-serif;
+  }
+
+  #shelf {
+    position: absolute; 
+    width: 100%; height: 10px; 
+    bottom: 0;
+    background-color: magenta;
+  }
+</style>
\ No newline at end of file
