diff --git a/css/jquery.terminal-src.css b/css/jquery.terminal-src.css index f3e65867..f8ec2184 100644 --- 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 index d44ac5a2..64c9651f 100644 --- 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