Short lines in previously hidden terminal when terminal have position: fixed

[paulsmirnov]

Expected behavior

I expect to be able to attach the terminal plugin to a div even if the div is currently hidden. When I show the div later ("on-demand" console) it should display text correctly.

Actual behavior

When I show the div later, the text in the terminal is split into lines, one character per line. When I enter new text it is being split too.

Steps to reproduce

See this code pen: https://codepen.io/paulsmirnov/pen/NozwLQ

Browser and OS

Windows 10 + Chrome/Firefox/Edge

Hints

• After playing with CodePen for a while I think it works with jQuery 3.1.1 but fails to work with 3.3.1 (the latest).
• Also, the jquery.terminal 1.2 works ok, 1.3-1.4 throws an exception, 1.5+ fails to display text correctly.

[jcubic]

The code is handling this by using Intersection and Mutation observers. One is used if you create terminal on div that's not yet in DOM and the second when div is not visible, will look into that.

Quick test of the pen give this:

$.terminal.active().cols()
-Infinity

it probably get the width of the terminal which is 0, when it's not visible.

Right now you can fix this by using:

$('#term').show().terminal().resize();

[jcubic]

The issue is position: fixed that already give trouble in #324

[jcubic]

The problem was that Intersection Observer don't work if element have position: fixed
ref: Intersection observer does not work with target with position: fixed

and Chrome bug with WontFix status Issue 653240: Intersection Observer not firing when root is body and element is position: fixed

[jcubic]

The fix will be in version 2.2.0 you can try it from CDNJS url

https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@devel/js/jquery.terminal.min.js

[paulsmirnov]

Great, thanks! .resize() also did the trick.