fix scrolling on mobile #914

jcubic · Mar 13, 2024 · befb33a · befb33a
1 parent 4735d6c
commit befb33a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/css/jquery.terminal-src.css b/css/jquery.terminal-src.css
@@ -1120,11 +1120,11 @@ terminal .terminal-output > div {
     display: inline-block;
 }
 .cmd-editable {
-    position: fixed;
-    top: 0;
+    position: absolute;
+    top: calc(var(--cmd-top) * 1px);
+    bottom: 0;
     right: 0;
     left: 0;
-    bottom: 0;
     z-index: 500;
     color: transparent;
     background: transparent;

diff --git a/js/jquery.terminal-src.js b/js/jquery.terminal-src.js
@@ -1260,7 +1260,7 @@
     })();
     // -------------------------------------------------------------------------
     var is_css_variables_supported = root.CSS && root.CSS.supports &&
-            root.CSS.supports('--fake-var', 0);
+            root.CSS.supports('(--fake-var: 0)');
     // -------------------------------------------------------------------------
     var is_android = navigator.userAgent.toLowerCase().indexOf('android') !== -1;
     // -------------------------------------------------------------------------
@@ -10644,12 +10644,16 @@
                         var cmd_cursor = self.find('.cmd-cursor');
                         var offset = self.find('.cmd').offset();
                         var self_offset = self.offset();
-                        self.stopTime('flush').oneTime(1, 'flush', function() {
+                        self.stopTime('flush').oneTime(10, 'flush', function() {
+                            const top = output.height();
+                            const height = command_line.height();
                             css(self[0], {
                                 '--terminal-height': self.height(),
                                 '--terminal-x': offset.left - self_offset.left,
                                 '--terminal-y': offset.top - self_offset.top,
-                                '--terminal-scroll': scroller.prop('scrollTop')
+                                '--terminal-scroll': scroller.prop('scrollTop'),
+                                '--cmd-top': top,
+                                '--cmd-height': height
                             });
                             if (enabled && !is_mobile) {
                                 // Firefox won't reflow the cursor automatically, so