Safari CSS 列显示溢出错误

Question

请在 Chrome 与 Safari 中检查此代码段： https://codepen.io/peminator/pen/JjdmQmy)

.col {
  column-count: 5;
  font-size: 20px;
}

.col div {
  background: #ddd;
  position: relative;
}

.col div::before {
  content: '@';
  position: absolute;
  left: -12px;
}

<div class="col">
  <div>A</div>
  <div>A</div>
  <div>A</div>
  <div>A</div>
  <div>A</div>
</div>

为什么在 Safari 中 @ 不可见？有什么办法可以解决吗？

Answer 1

关于如何修复它，空转换 hack 似乎解决了这个问题

.col div::before { 
  ...
  transform: translate3d(0, 0, 0);
}

（我也试过 z-index 和 overflow 但它们没有效果）。

这似乎是一个与 column-count 属性相关的问题

Safari CSS 列显示溢出错误

Safari CSS column exhibits overflow bug

css

safari

multiple-columns