Viewport与多显示器环境下可调整Div内嵌套元素位置漂移问题排查

我使用Vue和OpenLayers开发了一款动画应用，将设置了position: relative的img元素置于带有resize: both; overflow: auto;样式的canvas元素右上角。动画生成逻辑为：通过循环创建帧，每次迭代将更新渲染后的canvas作为一帧，再获取一个隐藏的img标签（用于规避Vue和OpenLayers特性问题），通过getElementById(...)和getContext("2d").drawImage(...)将其绘制到帧canvas上。

尽管在循环合成帧前已冻结所有元素尺寸以保证输出大小与初始帧一致，但在调整视口、多显示器（特殊宽高比也会触发）环境下，该img元素仍会向canvas中部偏移。现需明确：常规环境下完全正常，但在多显示器、视口相关场景中，哪些因素会影响计算img元素位置的宽度值？

相关代码 #

JavaScript代码 #

if (showLegendFlag === true) {
  const mapLegend = document.getElementById("mapLegend");
  mapCnv
    .getContext("2d")
    .drawImage(
      mapLegend,
      mapCnv.width - mapLegend.width,
      0,
      mapLegend.width,
      mapLegend.height
    ); // drawImage(image, dx, dy, dWidth, dHeight)
}

HTML代码 #

<div id="map" class="map">
  <img id="legendMapOverlay" src="https://geo.weather.gc.ca/geomet?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=GDPS.CONV_KINDEX.PT3H&format=image/png&STYLE=KINDEX&lang=en"/>
</div>

<img id="mapLegend" :src="mapLegendURL" style="display: none;" v-if="displayMapLegend" crossorigin="anonymous" />

可能的影响因素 #

• 设备像素比（DPR）差异：多显示器的DPR可能不同，浏览器会自动缩放Canvas和图片元素。直接用mapCnv.width和mapLegend.width获取的是CSS像素值，但Canvas的实际绘制缓冲区是物理像素（CSS像素×DPR），若未做DPR适配，绘制坐标计算会出现偏移。
• 隐藏图片的尺寸计算误差：设置display: none的图片元素，浏览器可能无法正确计算其实际渲染尺寸，尤其是在视口或显示器变化后，图片宽高属性可能未更新到真实值，导致mapLegend.width获取的是初始值或错误值。
• Canvas的CSS尺寸与缓冲区尺寸不匹配：如果Canvas的CSS样式尺寸（受resize属性影响）和内部缓冲区尺寸（width/height属性）不一致，在不同视口或显示器下，这种不匹配会被放大，导致mapCnv.width（缓冲区宽度）和视觉上的Canvas宽度不符，进而影响位置计算。
• 视口/系统缩放影响：用户调整浏览器缩放比例、系统显示缩放（多显示器常见场景）时，页面元素实际渲染尺寸会按缩放比例变化，但冻结的尺寸是初始状态的，未同步更新缩放后的尺寸，导致坐标计算偏差。
• Vue响应式更新延迟：视口变化时，Vue对mapLegendURL的更新可能存在延迟，导致隐藏图片的加载或尺寸更新不及时，循环绘制时拿到的是旧的尺寸值。

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