Chromium 列布局和溢出隐藏隐藏文本

Question

我在使用列布局以及隐藏在 Chromium 中的溢出时遇到问题。除第一个之外的所有列中的第一个条目都缺少其文本。以下代码 sn -p 是一个最小化的示例。实际上，我会在出现相同问题的地方使用ul 和li。使用列布局，因为不知道会有多少元素或整体可用的宽度有多少。

.list {
  width: 14em;
  column-width: 4em;
}

.elem {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="list">
  <div class="elem">First entry</div>
  <div class="elem">Second entry</div>
  <div class="elem">Third entry</div>
  <div class="elem">Fourth entry</div>
  <div class="elem">Fifth entry</div>
  <div class="elem">Sixth entry</div>
</div>

此问题的“解决方案”似乎是将transform: translateZ(0); 添加到列表元素中，如下所示：

.list {
  width: 14em;
  column-width: 4em;
}

.elem {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateZ(0);
}

<div class="list">
  <div class="elem">First entry</div>
  <div class="elem">Second entry</div>
  <div class="elem">Third entry</div>
  <div class="elem">Fourth entry</div>
  <div class="elem">Fifth entry</div>
  <div class="elem">Sixth entry</div>
</div>

但我不相信这应该是最终的解决方案。这只是一个让它以某种方式工作的“hack”。

这个问题出现在 google chrome 和新的 microsoft edge 浏览器（它们都使用 chromium 引擎）中

所以我的问题是：这里真正的问题是什么，我该如何正确地做到这一点？

Answer 1

backface-visibility: hidden; 也执行相同的技巧。可能是因为 GPU 渲染是强制的。这可能是一个错误。

.list {
  width: 14em;
  column-width: 4em;
}

.elem {

  backface-visibility: hidden;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="list">
  <div class="elem">First entry</div>
  <div class="elem">Second entry</div>
  <div class="elem">Third entry</div>
  
  <div class="elem">Fourth entry</div>
  <div class="elem">Fifth entry</div>
  <div class="elem">Sixth entry</div>
</div>

通过进行一些测试，我找到了一种不强制在 GPU 上进行渲染的替代方案。 使用：border: solid 0.1px transparent; 我个人更喜欢它。

很遗憾，我不能告诉你这个错误的原因，我什至不知道它是否可以被视为一个答案，但更多的是一个建议。

.list {
  width: 14em;
  column-width: 4em;
}

.elem {

  border: solid 0.1px transparent;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="list">
  <div class="elem">First entry</div>
  <div class="elem">Second entry</div>
  <div class="elem">Third entry</div>
  
  <div class="elem">Fourth entry</div>
  <div class="elem">Fifth entry</div>
  <div class="elem">Sixth entry</div>
</div>