Chrome中CSS Grid内contenteditable点击外部误激活的修复方案

问题说明 #

这是 Chrome 浏览器独有的渲染bug，Firefox 下无异常：当contenteditable="true"的元素是 CSS Grid 布局容器的直接子元素时，点击页面中该元素外部（包括Grid容器内的空白区域、容器外的页面区域），都会意外触发该元素进入编辑状态。
已验证无效的尝试：给Grid容器添加overflow: hidden、设置边框、内边距属性均无法解决该问题。

问题复现代码（Grid布局，存在bug） #

<div style="width: 300px; margin: 0 auto; display: grid; overflow: hidden; border: 1px solid black;">
  <div contenteditable="true">aaa</div>
</div>

对照代码（非Grid布局，无异常） #

<div style="width: 300px; margin: 0 auto; overflow: hidden; border: 1px solid black;">
  <div contenteditable="true">aaa</div>
</div>

可用临时修复方案（无需等待Chrome官方补丁） #

以下方案均经过实测验证，不会影响contenteditable元素的正常编辑功能：

• 方案1（改动最小，纯CSS修复）：给作为Grid直接子元素的contenteditable元素添加两个CSS属性position: relative; z-index: 0;，手动为其创建独立的层叠上下文，修正Chrome错误的点击命中区域计算。
  修复后代码示例：

  <div style="width: 300px; margin: 0 auto; display: grid; overflow: hidden; border: 1px solid black;">
    <div contenteditable="true" style="position: relative; z-index: 0;">aaa</div>
  </div>
  

• 方案2（兼容性最好）：不要让contenteditable元素成为Grid容器的直接子节点，在其外层套一层无特殊样式的普通块级元素，让普通块级元素作为Grid的直接子项，即可绕开Chrome的命中检测bug。
  修复后代码示例：

  <div style="width: 300px; margin: 0 auto; display: grid; overflow: hidden; border: 1px solid black;">
    <div>
      <div contenteditable="true">aaa</div>
    </div>
  </div>
  

不推荐使用全局事件监听拦截焦点的方案，这类方案容易误伤正常的点击编辑逻辑，还可能导致光标定位、选区选择等编辑功能异常。

内容的提问来源于stack exchange，提问作者d.k