Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues when terminal is inside SVG #744

Closed
6 of 7 tasks
jcubic opened this issue Feb 9, 2022 · 3 comments
Closed
6 of 7 tasks

Issues when terminal is inside SVG #744

jcubic opened this issue Feb 9, 2022 · 3 comments
Labels
Bug resolved if issue is resolved, it will be open until merge with master
Milestone

Comments

@jcubic
Copy link
Owner

jcubic commented Feb 9, 2022

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 jcubic added the Bug label Feb 9, 2022
@jcubic
Copy link
Owner Author

jcubic commented Feb 9, 2022

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
Copy link
Owner Author

jcubic commented Mar 15, 2022

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 added a commit that referenced this issue Mar 26, 2022
@jcubic
Copy link
Owner Author

jcubic commented Mar 26, 2022

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

@jcubic jcubic added the resolved if issue is resolved, it will be open until merge with master label Mar 26, 2022
@jcubic jcubic added this to the 2.33.0 milestone Mar 26, 2022
jcubic added a commit that referenced this issue Mar 27, 2022
jcubic added a commit that referenced this issue Mar 27, 2022
jcubic added a commit that referenced this issue Mar 27, 2022
@jcubic jcubic closed this as completed May 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug resolved if issue is resolved, it will be open until merge with master
Projects
None yet
Development

No branches or pull requests

1 participant