position:fixed元素在含overflow:hidden与will-change:transform的父元素中被裁剪的解决方案

问题场景 #

设置了overflow:hidden的父级div会隐藏超出其尺寸的内容，比如下面的示例中，只能看到红色子元素的前20像素部分：

<div style="position: relative;
            overflow: hidden;
            height: 20px">
  <div style="width: 100px; height: 100px; background: red"></div>
</div>

通常，给子元素设置position:fixed可以忽略父级的overflow:hidden，从而看到完整的100x100像素元素：

<div style="position: relative;
            overflow: hidden;
            height: 20px">
  <div style="position: fixed; width: 100px; height: 100px; background: red"></div>
</div>

但当父级div添加了will-change:transform属性后，position:fixed就会失效，子元素依然会被父级的overflow:hidden裁剪：

<div style="position: relative;
            height: 20px;
            overflow:hidden;
            will-change: transform">
  <div style="position: fixed; width: 100px; height: 100px; background: red"></div>
</div>

目前无法修改父级的overflow:hidden，也不能直接覆盖will-change:transform（会影响其他功能），有没有其他解决办法？实际场景中是下拉选择框在列表项内被裁剪的问题。

可行解决方案 #

• 将目标元素移到父级DOM之外：will-change:transform会让父级成为fixed元素的包含块，把下拉框这类需要完整显示的元素移到body或其他不受影响的父级下，通过JS计算触发元素的位置，将目标元素定位到对应位置即可。
• 用position:absolute配合JS模拟fixed效果：给子元素设置position:absolute，通过JS实时计算它相对于视口的坐标，手动设置top、left属性，同时监听滚动、窗口 resize 事件更新位置，避开父级的裁剪限制。
• 优化父级的will-change属性：如果父级的will-change:transform是为特定动画设置的，可以改为更精准的属性（比如仅动画涉及的opacity），或者只在动画执行时临时添加该属性，动画结束后移除，平衡动画性能和元素显示需求。

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