Webkit是否存在Bug？Translate结合Overflow致内容无法点击

问题现象 #

• 父元素添加translate-x-5后，右侧绿色区域的文本完全无法选中；Chrome里按钮只有最左侧边缘能触发点击，Firefox里按钮可点击但文本仍无法选中
• 移除translate-x-5类后，文本恢复可选中状态，按钮点击也正常，符合预期表现

问题原因 #

这是transform（translate属于transform的一种）的特性导致的：当元素应用transform后，会创建新的堆叠上下文，同时其overflow的裁剪范围会基于变换后的位置计算，但子元素的绝对定位是基于变换前的父元素位置。

说白了，绿色区域的元素虽然视觉上在父元素外部，但它的交互（点击、文本选中）区域被父元素的overflow-y-clip裁剪了——父元素平移后，实际可交互边界发生偏移，但子元素的交互范围还被限制在父元素原来的框内，所以只有边缘极小区域能响应操作。

解决方案 #

方案1：用margin/left替代translate实现偏移

如果不需要transform的其他特性，直接把translate-x-5换成ml-5（父元素是absolute定位，也可以用left-5），这样不会触发transform带来的堆叠上下文问题：

<!-- 修改父元素的类 -->
<div class="bg-blue-200 w-64 p-3 absolute inset-0 overflow-y-clip ml-5">

方案2：把交互元素移到父元素外面

如果必须保留translate，就把绿色的按钮区域从父元素中移出，放到同级位置，手动计算偏移量：

<!-- main -->
<div class="absolute inset-0 overflow-y-clip bg-red-200">
  <!-- nav -->
  <div class="bg-blue-200 w-64 p-3 absolute inset-0 overflow-y-clip translate-x-5">
    <div class="overflow-y-auto">Lots of content that can overflow in the y-axis</div>
  </div>
  <!-- toggle 移到同级，手动计算偏移 -->
  <div class="bg-green-200 absolute left-[calc(64px+5px)] top-0 bottom-0">unselectable <button>button</button></div>
</div>

方案3：移除父元素的overflow裁剪（业务允许的话）

如果父元素不需要限制垂直方向的溢出，直接删掉overflow-y-clip类，子元素的交互区域就能正常响应所有操作。

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