Xterm.js: .xterm-char-measure-element Dom width & height calculation error

[opopeieie]

Can we change the getBoundingClientRect method under /browser/services/CharSizeService.ts to offsetWidth or offsetHeight to get the width and height?? cuz sometimes the getBoundingClientRect and Timeout do not get the width and height correctly

[Tyriar]

I haven't seen any issues with this, is it a browser bug you're hitting? We need some more information on how to repro.

[opopeieie]

Oh....Here is the case: https://codesandbox.io/s/nifty-hill-1i7wz?file=/src/App.js ,When the style is set to transform: scale, xter uses the "getBoundingClientRect" with the wrong length and width, offset is normal

[Tyriar]

I don't think this edge case is that important, but maybe it could be improved by using ResizeObserver if it's available?

[mofux]

I think the problem is that getBoundingClientRect() provides the dimensions with transformations applied, whereas offsetHeight and offsetWidth provides the original dimensions without the transformations. In that sense, I would agree that using offsetHeight and offsetWidth is preferable over getBoundingClientRect() for our use-case. Still, as @Tyriar already stated, this is a very minor edge case.

I (only speaking for myself) would be open towards a PR that changes the measure from getBoundingClientRect() to offsetHeight and offsetWidth.

[Tyriar]

👍 if they're functionally equivalent outside of that

[opopeieie]

My current solution is to give up transform animation, if it can be changed, it’s really great!🙂🙃