html - 选择内部 flex 元素时，文本选择背景在 Safari 中变得不可见

Question

当我在 Safari 中跨多个 flex 元素项 选择文本时，选择背景 在文本的某些部分变得不可见。

以下是 Firefox 和 Safari 区别的一些截图:

• Safari
• Firefox

这里有一个简单的代码沙箱来重现:Link

有没有人遇到过这个问题？

Answer 1

这是一个文档化的 Webkit/Safari bug影响display: flex和 display: grid .

在撰写本文时，文本选择错误似乎影响了第一个 block-level flex 的某些直系子代的叶后代或 grid容器，取决于某些布局属性(请参阅下面的 Layout Fiddles)。

值得注意的是 user-select 没有有效值属性将对上述错误产生任何影响，也不会使用 ::selection 伪元素。同样值得注意的是 table/display: table , inline-block , float , 和 columns 布局似乎不受此错误的影响，因此这些可能是某些用例的可行替代方案。然而，由于 flex和 grid可以说是当今构建布局最强大的工具，这里有一些解决方法仍然允许您使用这些实现:

方法一:空 block 元素

由于上述错误导致 OP 示例中第二个 flex 元素的第一个 block 级叶子无法选择，因此此解决方法只是添加一个空 block 元素(在本例中为 div，但任何display 值为 block 的元素将起作用)高于 <p>invisible</p>这解决了问题:

<div style={{ display: "flex" }}>
  <div style={{ marginRight: 12 }}>
    <p>blue</p>
    <p>blue</p>
  </div>
  <div>
    <div />
    <p>invisible</p>
    <p>blue</p>
  </div>
</div>

更新后的代码沙箱显示了方法 1 的实际应用:

https://codesandbox.io/s/flamboyant-raman-6yq7m

方法二: ::before 伪元素

此修复使用与第一个相同的概念，除了它使用 CSS 伪元素而不是空的 div。 .为简单起见，它还将此规则应用于所有 flex 元素，无论它们是否会受到影响。

.flexContainer {
  display: flex;
}

.flexItem::before {
  display: block;
  content: "";
}

<div class="flexContainer">
  <div class="flexItem">
    <p>blue</p>
    <p>blue</p>
  </div>
  <div class="flexItem">
    <p>invisible</p>
    <p>blue</p>
  </div>
</div>

更新后的代码沙箱显示了方法 2 的实际应用:

https://codesandbox.io/s/sharp-andras-jv6x4?file=/src/styles.css

这种方法可以说更易于维护，因为您不必像使用第一种方法那样管理特殊情况的子元素。一个警告是你将用完你的唯一一个 ::before flex 元素上的伪元素，以防您打算将其用于其他用途。

Safari 特定修复

适用于 Safari 且在其他浏览器中良性的兼容性修复可能是理想的解决方案。上面提到的两种方法似乎都是这种情况(至少在撰写本文时使用最新的 Chrome 和 Firefox，尽管可靠的浏览器测试总是一个好主意)。

但是，如果您想“遏制黑客”可以这么说，那么您可以尝试使用设备/用户代理嗅探 Javascript 库(例如 react-device-detect ，如果您使用的是 React)并相应地有条件地呈现解决方法。

或者，如果您最终选择方法 2，那么您可以使用 Safari-specific CSS targeting仅在 Safari 中呈现伪元素。

布局 fiddle

在下面的 fiddle 中，我根据 OP 的原始示例进行了推断，该示例显示了不同的 flex 和网格布局如何影响第一个叶子后代显示和不显示突出显示的文本。我添加了额外的 flex 元素，并嵌套了 flex 容器的每个直接子元素的第一个元素，以表明树的深度似乎无关紧要。

<表类="s-表"> <头> 布局 fiddle <正文> flex行 Fiddle flex行(换行) Fiddle flex列(换行) Fiddle grid Fiddle