Blazor图表库使用CSS transform缩放移动元素时出现边框残留问题

我正在Blazor中开发使用HTML/CSS展示节点和连线的图表库，其中一个场景下，当我缩放到最小比例后移动节点，界面上会出现大量“边框残留”痕迹；如果移除节点CSS中的边框样式，该问题不再出现。

• 缩放功能通过transform: translate(x, y) scale(f) CSS函数实现，当前scale值为0.1，此时元素显示非常小但仍可移动。
• 移动节点通过修改其top和left CSS属性实现，节点为绝对定位，承载节点的div设置了overflow: visible以支持节点超出容器范围。

问题效果如下图所示：

相关代码 #

节点结构代码如下：

<div class="node" style="top: 100px; left: 100px">
    <div class="content">
        其他内容
    </div>
    <div class="border"></div>
</div>

边框相关CSS代码如下：

border: calc(var(--node-border-width) + 3px) solid rgb(0, 120, 215);
height: calc(100% + 2px);
left: -1px;
pointer-events: none;
position: absolute;
top: -1px;
width: calc(100% + 2px);

我在Chrome和Edge浏览器中测试均出现该问题，请问是什么原因导致的？

核心原因 #

这是Chromium内核（Chrome、Edge均基于该内核）的典型渲染缺陷，是极低缩放比例下的重绘区域计算错误和你的实现逻辑叠加导致的：

1. 当scale缩小到0.1这类极小值时，元素实际渲染尺寸会被压缩到原尺寸的1/10，Chromium的脏矩形（需要重新渲染的区域）计算逻辑会误判边框的实际覆盖范围，移动节点时旧位置的边框像素没有被纳入重绘范围，就留下了残留痕迹。
2. 你用了独立的绝对定位div.border来实现边框，还通过calc动态计算尺寸、top: -1px/left: -1px做偏移，极低缩放比例下会出现亚像素渲染的计算误差，进一步干扰了浏览器对重绘区域的判断。
3. 你通过修改top/left移动节点，这类属性会触发元素的布局重排（reflow），叠加transform缩放的渲染逻辑时，重排和重绘的时序不同步，也会加大残留出现的概率。

解决方案 #

• 调整节点移动逻辑：把修改top/left改为修改transform的translate参数，和缩放逻辑合并为transform: translate(x, y) scale(f)，这类修改只会触发重绘不会触发重排，能大幅降低渲染同步问题的概率。
• 给节点容器添加will-change: transform属性，提示浏览器提前对该区域做渲染优化，避免脏矩形计算错误。
• 简化边框实现：去掉额外的.border绝对定位元素，直接给.node添加边框，配合box-sizing: border-box统一尺寸计算逻辑，减少动态calc带来的计算误差。如果需要边框和内容分层的效果，可以用box-shadow或outline替代额外的DOM节点。
• 若残留仍然存在，可以给节点容器添加极微小的背景透明度，例如background-color: rgba(255,255,255,0.99)，强制浏览器每次重绘都刷新整个容器区域，即可彻底消除残留。

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