Wrong width() of html elements inside SVG foreign object

[jcubic]

Description

I'm not sure if you want this to be reported (because of #4741) but .width() don't return the same value as .getBoundingClientRect() for html DOM nodes inside SVG. But I don't use SVG elements, but HTML elements inside foreign object. The size works but it return different value than getBoundingClientRect().

At least jQuery should work the same as native API for this case.

Link to test case

Here is a link to a demo that uses my library jQuery Terminal that is inside SVG.
https://codepen.io/jcubic/pen/abVJrob?editors=0010

Additional info

There are two types of issues, one with padding/margins/scrollbar that is way bigger because 1px in SVG is not the same as 1px on the screen (). But the main issue is that .width() returns completely wrong results, that's why my library thinks that the screen is much smaller (the long line wrapping is done in JavaScript).

Let me know if this is something you would like to handle/fix in jQuery and if you want simpler reproduction.

[Shakti111]

ok

[mgol]

Thanks for the report. However, jQuery .width() is supposed to return the computed CSS width of the element and not the actual size on the screen so the output is as expected.

This is so unnatural because the CSS dimensions seem to refer to viewBox and not regular pixel values. However, that's just an SVG quirk and I don't see a good way to address that while still being true to the docs. Especially that we don't fully support SVGs per https://github.com/jquery/jquery/wiki/Won't-Fix#svg-or-vml and the issue you linked.