Wrong canvas height calculation

This is probably the same class of bug as #1081.

I use xterm.js integrated in a fixed size area, and tell xterm.js to fit in there (it’s actually in a PhosphoreJS widget/view/tab/dockable thingy). When playing with the browser zoom level, and thus the window.devicePixelRatio, it happens sometimes that the bottom of the terminal is outside the allocated space (the area of the parent div). I made a reproducer by modifying the demo application, it can be found at

https://github.com/simark/xterm.js/tree/repro-canvas-height

To run, build and start the demo as usual (npm run start). At 100% zoom level, this is what I see, which is right:

The terminal container is a 500px x 500px div. The pink in the back is a div with width 100% and height 500px I have put so we can see if the terminal’s height is greater than the allocated 500px. We see a bit of pink below the terminal, probably because xterm.js only uses the space required to fit the lines that fit. Since there isn’t enough space to fit another line, it just doesn’t use that space. That seems right.

With the zoom level at 67%, I see this:

As you can see, the terminal goes beyond the allocated height. When integrated in an application with other widgets, it means that the terminal will overlap on something else, or the bottom (the last few lines) will be hidden.

Details

• Browser and browser version: Chromium Version 62.0.3202.94 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit) as well as Firefox 57.0 on Ubuntu 16.04
• OS version: Ubuntu 16.04.
• xterm.js version: v3 (see commit in the reproducer branch)

Steps to reproduce

1. Checkout branch https://github.com/simark/xterm.js/tree/repro-canvas-height
2. npm run start
3. Open http://localhost:3000, zoom out to 67%, reload if needed for the layout to readjust

[simark]

Ok thanks! I’ll try to upgrade to today’s master and test soon.

[mofux]

Should be fixed by #1157