Bootstrap Popover箭头错位问题：仅滚动区域偏移成因咨询

这个问题我之前也碰到过几次，核心原因和Bootstrap Popover依赖的Popper定位逻辑，以及浏览器对不可见元素的渲染机制有关，具体可以拆成这几个点：

• 初始不可见元素的位置/尺寸未被正确计算
  浏览器为了优化性能，对于初始在视口外的元素，不会完全渲染它的布局信息（比如精确的offset值、元素高度）。当你滚动到这些元素并触发Popover时，Popper.js（Bootstrap用来处理定位的核心库）会基于当时还未完全更新的元素位置/尺寸数据来计算Popover和箭头的位置，自然就会出现偏移。而初始可见的元素在页面加载时就完成了渲染，所以定位完全正常。

• Popper的位置缓存机制
  为了提升性能，Popper.js会缓存目标元素的位置信息。如果你的Popover是页面加载时就初始化的（而不是滚动到元素时才初始化），那么对于初始在视口外的元素，Popper会缓存它当时的位置（相对于文档顶部的偏移）。当你滚动页面后，元素的实际视口位置已经变化，但Popper没有自动更新缓存，触发时还是用了旧的位置数据，导致箭头偏移。

• 滚动事件未触发定位重计算
  Bootstrap的Popover默认只会在触发（比如hover、click）时才重新计算位置，不会主动监听页面的滚动事件。如果页面滚动后，元素的位置发生了变化，但触发Popover时，Popper没有正确获取最新的滚动偏移量（比如视口的scrollTop值），就会导致定位计算时出现偏差，箭头自然就错了位。

• 父容器的样式干扰
  如果这些需要滚动才能看到的元素，被包含在带有transform、perspective或者filter属性的父容器里，会改变浏览器的定位上下文——position: absolute的元素会相对于这个父容器定位，而不是文档。当页面滚动时，父容器的滚动位置没有被Popper正确识别，就会导致Popover的箭头位置计算错误。而初始可见的元素可能不在这个特殊的父容器里，所以没有问题。

内容的提问来源于stack exchange，提问作者DRich