EdgeHTML 16中使用translateY定位的sticky元素点击区域异常

这确实是EdgeHTML（包括你提到的16版本）的已知兼容性Bug，不属于预期行为——你的写法本身是现代浏览器中实现sticky元素垂直居中的标准方案，问题完全出在旧Edge的渲染引擎缺陷上。

Bug根源 #

EdgeHTML对设置了position: sticky的元素应用transform时，没有正确同步更新元素的交互命中区域（hitbox）：它仍然基于transform之前的原始布局位置计算hover、点击等交互事件的触发范围，而不是transform后的视觉位置。类似的渲染不一致问题在旧版Edge中并不罕见，比如fixed元素结合transform时也会出现类似的交互偏移。

解决方案 #

针对这个Bug，有两种可靠的修复思路，你可以根据自己的布局需求选择：

方案1：用Flex布局替代Transform居中（推荐）

这种方案完全避开transform，兼容性更好，代码也更简洁：

.body { max-height: 600px; overflow: auto; }
.container { width: 500px; border: 1px dotted blue; position: relative; }
.wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 实现垂直居中 */
}
.item {
  border: 2px solid red;
  position: sticky;
  /* 移除原有的 top: 50% 和 transform: translateY(-50%) */
  background: white;
  width: fit-content; /* 保持元素宽度自适应，可选 */
}
.item:hover { border: 2px solid green; }
.button { border: 1px solid pink; }
.button:hover { border: 1px solid turquoise; }

通过给绝对定位的wrapper添加flex布局，直接实现item的垂直居中，同时保留sticky属性的功能，完美解决旧Edge的交互偏移问题。

方案2：用伪元素修正交互命中区域（保留Transform写法）

如果因为布局限制必须保留transform居中的写法，可以通过添加透明伪元素来接管交互事件：

.body { max-height: 600px; overflow: auto; }
.container { width: 500px; border: 1px dotted blue; position: relative; }
.wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.item {
  border: 2px solid red;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  pointer-events: none; /* 让原元素不接收交互 */
  position: relative; /* 为伪元素提供定位上下文 */
}
.item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: auto; /* 伪元素接管交互 */
  background: transparent;
}
.item:hover { border: 2px solid green; }
.button {
  border: 1px solid pink;
  pointer-events: auto; /* 确保按钮本身能正常接收交互 */
}
.button:hover { border: 1px solid turquoise; }

原理是让原sticky元素不响应交互，用一个和transform后元素完全重合的伪元素来接收hover、点击事件，从而修正交互区域的偏移。

额外说明 #

需要注意的是，微软已经停止对EdgeHTML内核的维护，现在的新版Edge基于Chromium内核，这个Bug在新版Edge中已经完全修复。如果你的用户群体主要使用现代浏览器，这个问题不会出现；但如果需要兼容旧EdgeHTML版本，方案1是更稳妥的选择。

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