Ngx-bootstrap: Tooltips vibrate when zoomed/scaled

[webdevan]

Possibly related to #3047

With browser zoom at 125% or 175% or Windows scale at 125% (which is often the default on laptops), seemingly at random some of our tooltips will vibrate instead of being still in one position.

The inline style of the tooltip is changing by 1px either to the left or top properties and very occasionally both together (diagonal vibrate).

I have dug into the code a little and can see that positionElements is being executed repeatedly many times and the calculation for targetElPosition changes which is causing the vibration effect.

Unfortunately I was not able to reproduce it on Plunkr.

Any help/tips appreciated.

ngx-bootstrap: 2.0.4
Angular: 5.2.9
Bootstrap: 3.3.7

Built with ng build. It's a hybrid AngularJS + Angular5 application and also uses ngx-perfect-scrollbar (in case that has anything to do with it).

[webdevan]

I think I've found the problem. Browsers round up or down the element.offsetHeight and element.offsetWidth as they please. It's not even conventional rounding off, so 50.41px might go up to 51px and in the next frame it might go down to 50px. This seems to be the cause of the vibrating tooltip.

A solution which seems to solve it is to replace occurrences of .offsetWidth/Height with .getClientBoundingRect().width/height in ng-positioning.js.

[valorkin]

PR sent for review, thanks!

[webdevan]

Hi @valorkin, just wondering when this PR can be merged and/or released? Thanks

[webdevan]

@valorkin please can we have an update on this? I don't mean to be pushy but this bug is holding my team up and I don't want to switch to my fork of ngx-bootstrap but I will have to if this isn't patched soon.

[valorkin]

merged, it looks good, but eventually getRect could be used to work with not rounded values