getBoundingClientRect 获取的数据不正确

getBoundingClientRect为什么获取的数据不准

不知道你们有没有遇到过这种情况，在页面上获取容器的大小使用getBoundingClientRect()快照函数获取的值不准确，和真实数值有偏差。

问题发生场景

我在实现一个tooltip组件的时候需要在鼠标移入的时候获取当前trigger容器的位置以及tooltip组件的位置。

像这样我获取这个容器的位置大小使用getBoundingClientRect这个函数是没有任何问题的数值都是准确的。
我获取容器位置把left top赋值给tooltip组件。然后组件就定位到了和容器组件一样的位置。需要帮这个容器组件定位到我图上的位置我还需要获取tooltip组件的大小还做运算。
问题就出现了我获取的tooltip的大小比实际的大小要小一些。不管怎么调试怎么看在代码层面上都没有一点问题。

问题解决

tooptip组件有一个很重要的东西。动画=>就是这个动画影响到了getBoundingClientRect()这个函数的值。如果我这函数只是单纯的淡入淡出还没有问题。主要我这个动画有一个很关键的属性：transform:scale();就是这个scale()函数影响取值。

算出来的数值大小就是实际大小除影响之后大小这个比值就是设置scale()数值。

解决问题我们把获取的数值除以这个scale()数值=>tooltip真实的大小了