Safari中跨flex元素项选中文本时selection背景部分不可见问题求助

问题描述 #

当我在Safari中跨多个flex布局子元素选中文本时，部分文本区域的选中文本背景会变为不可见。该问题仅在Safari中出现，Firefox浏览器下表现正常，我也准备了可复现该问题的最小代码示例。请问有没有人此前遇到过该问题？

解决方案 #

这是Safari内核的已知渲染bug，核心原因是Safari对跨flex子元素的选区绘制逻辑和其他主流浏览器内核不同，绘制选区时会错误跳过部分flex子项的渲染区域，可通过以下方案修复：

• 方案1：给所有flex子元素添加transform: translateZ(0)属性，触发Safari的GPU渲染流程，强制浏览器正确绘制选中区域的背景
• 方案2：检查flex子元素是否设置了overflow: hidden、contain: layout之类的裁剪/布局隔离属性，如果有可以将这类属性移到子元素的外层包裹节点上，避免影响选区的渲染绘制
• 方案3：全局自定义选中文本样式，添加如下CSS代码：

::selection {
  background-color: #007aff;
  color: #ffffff;
}
/* 兼容火狐浏览器 */
::-moz-selection {
  background-color: #007aff;
  color: #ffffff;
}

手动指定选中样式可以覆盖Safari的默认选区绘制逻辑，解决大部分场景的背景丢失问题

• 方案4：如果使用的是inline-flex容器，可以尝试改为普通的flex块级容器，也能修复部分场景的异常

内容的提问来源于stack exchange，提问作者Thomas Roger Lux