Chrome 69 CSS渲染问题：列，溢出和位置：相对

Question

我最近在Windows 10的Chrome 69中遇到Bootstrap's card columns 的问题。即，将.card-columns与.list-group和.list-group-item组合在一起时，然后使用overflow: auto和任意max-height值在列表组上启用溢出。

它比这更具体。第二张卡必须是第一张卡的兄弟。然后，滚动到第一张卡的底部，使这些项目不可交互/不可点击。

最小引导程序示例：

/* obviously not showing Bootstrap styles */

.list-group {
   overflow: auto;
   max-height: 128px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-columns">
  
  <!-- Card 1 -->
  
  <div class="card">
    <div class="card-header">Overflow Card 1</div>
    <div class="list-group list-group-flush">
      <a class="list-group-item list-group-item-action" href="#">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#">Item 4</a>
      <a class="list-group-item list-group-item-action" href="#">Item 5</a>
      <a class="list-group-item list-group-item-action" href="#">Item 6</a>
      <a class="list-group-item list-group-item-action" href="#">Item 7</a>
      <a class="list-group-item list-group-item-action" href="#">Item 8</a>
      <a class="list-group-item list-group-item-action" href="#">Item 9</a>
      <a class="list-group-item list-group-item-action" href="#">Item 10</a>
    </div>
  </div>
  
  <!-- Card 2 -->
  
  <div class="card">
    <div class="card-header">Overflow Card 2</div>
    <div class="list-group list-group-flush">
      <a class="list-group-item list-group-item-action" href="#">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#">Item 4</a>
      <a class="list-group-item list-group-item-action" href="#">Item 5</a>
      <a class="list-group-item list-group-item-action" href="#">Item 6</a>
      <a class="list-group-item list-group-item-action" href="#">Item 7</a>
      <a class="list-group-item list-group-item-action" href="#">Item 8</a>
      <a class="list-group-item list-group-item-action" href="#">Item 9</a>
      <a class="list-group-item list-group-item-action" href="#">Item 10</a>
    </div>
  </div>
</div>

好吧，还在吗？考虑到所有这些，我决定一一消除Bootstrap样式。排除法。完美，我可能只是在做些愚蠢的事情。

最小本机示例：

/* stripped down Bootstrap styles, plus styles from earlier */

body { font-family: sans-serif; padding: 1rem; }

.card-columns {
  column-count: 3;
}

.list-group {
  max-height: 256px;
  overflow: auto;
}

.list-group-item {
  /* problem style */
  position: relative;
  /* -------------*/
  
  display: block;
  padding: .75rem 1.25rem;
}

.list-group-item:hover {
  background-color: #eee;
}

<div class="card-columns">
  
  <!-- Card 1 -->
  
  <div class="card">
    <div class="card-header">Overflow Card 1</div>
    <div class="list-group list-group-flush">
      <a class="list-group-item list-group-item-action" href="#">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#">Item 4</a>
      <a class="list-group-item list-group-item-action" href="#">Item 5</a>
      <a class="list-group-item list-group-item-action" href="#">Item 6</a>
      <a class="list-group-item list-group-item-action" href="#">Item 7</a>
      <a class="list-group-item list-group-item-action" href="#">Item 8</a>
      <a class="list-group-item list-group-item-action" href="#">Item 9</a>
      <a class="list-group-item list-group-item-action" href="#">Item 10</a>
    </div>
  </div>
  
  <!-- Card 2 -->
  
  <div class="card">
    <div class="card-header">Overflow Card 2</div>
    <div class="list-group list-group-flush">
      <a class="list-group-item list-group-item-action" href="#">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#">Item 4</a>
      <a class="list-group-item list-group-item-action" href="#">Item 5</a>
      <a class="list-group-item list-group-item-action" href="#">Item 6</a>
      <a class="list-group-item list-group-item-action" href="#">Item 7</a>
      <a class="list-group-item list-group-item-action" href="#">Item 8</a>
      <a class="list-group-item list-group-item-action" href="#">Item 9</a>
      <a class="list-group-item list-group-item-action" href="#">Item 10</a>
    </div>
  </div>
</div>

在这里很有趣。归结为从column-count中删除.card-columns或从position中删除.list-group-item。如果您在正确的环境中，运行CodePen将防止激活.list-group-item:hover样式（遵循上述规则）。

话虽如此...

我不喜欢这么长的问题。我很少读它们。所以，我是伪君子，我以为我会挖掘你们的大脑。 我相当确定这是一个Chrome错误。此代码在Firefox和Edge中均可正常运行。 （我似乎无法在Chromium Bug跟踪器上进行快速搜索找到任何东西，这似乎是一个非常极端的情况，可能没有意义继续前进。）

哦，调整页面大小或双击选择不可用的列表项必须强制进行某种重绘/布局，因为此后不存在问题。啊。

我希望您可以指出某个地方的现有错误报告，此问题的解决方法，或证明我的计算机只是被困扰。

感谢您阅读本文。期待您的回复！

TL; DR

将column-count，overflow:auto和position:relative结合使用会使Chrome 69在十月份的风格上令人毛骨悚然。发送帮助。

编辑1

我的问题由社区进行了编辑，以使SO代码段优于CodePen。在SO代码段中，调整页面大小不会导致列表如上所述重新绘制。但是，在the original CodePen上调整预览窗格的大小将重现这些结果。琐碎，但值得一提。

编辑2

今天上午在macOS Mojave上进行了测试。 Chrome中存在问题，但Firefox 62或Safari 12中没有问题。因此，这不是webkit或Windows所孤立的问题。我决心雕刻南瓜，完全避免使用position属性。

Answer 1

在macOS上的Chrome 71 Canary中不存在此问题。我将假设此问题已解决，并将最终解决。