Issues when terminal is inside SVG

[jcubic]

Issue summary

Pixel calculations are way off when inside SVG

Expected behavior

There should be an easy way to use jQuery Terminal inside SVG

Actual behavior

padding, margins, scrollbar, character size are way too big

Steps to reproduce

1. See https://codepen.io/jcubic/pen/rNYybjr

Aditional findings (after fix)

• Links have very big underlines (they need to be created by hand). (Google Chrome bug)
• terminal-scroll-marker element is way to big (have 20px but scaled).
• Spacing between the lines. Browser bug
• Clipboard Textarea trigger scrollbar.
• Click to enable terminal is very narrow.
• Problem with echo without newline (margin is calculated in a wrong way).
• Terminal is not responsive. The size is changed after refresh.

[jcubic]

There are two types of issues.

1. Issue with CSS where 1px inside SVG is not the same as 1px on the screen
2. Issue with jQuery .width() reported upstream Wrong width() of html elements inside SVG foreign object jquery/jquery#5011

[jcubic]

jQuery closed the issue, there are two problems here:

1. The first issue is that jQuery .width() return wrong result, we can fix this by using .getBoundingClientRect()

2. The Second issue is with scrollbar width (only on Chrome that can set the size).

The solution is to get the pixel density of HTML inside SVG.

<div class="pixel" style="width: 1px; height: 1px"></div>

var pixel = self.find('.pixel').get(0).getBoundingClientRect();

on Codpen demo the pixel is 3px in size.

[jcubic]

Working demo: https://terminal.jcubic.pl/laptop/