Chrome 列宽呈现问题

Question

我发誓这曾经可以正常工作，它在 iOS 下的 Safari 中仍然可以正常工作，但由于某种原因，它在 Chrome 中被破坏了，显然（根据我们的客户）在 IE 11 中。

基本设置在这里：

如果 transform: translateZ(0); 被注释掉，那么最初在屏幕外的所有内容都不会被渲染，有了它，硬件加速渲染就会被强制执行并被渲染。现在的问题是，即使它被渲染了，元素也不能与之交互。我设置了两个 onclick 内联脚本，一个在 "A.L.C" 上，一个在 "KAREN WALKER EYEWEAR" 上。单击第一个有效，而第二个无效，因为它位于一个仅因转换而显示的元素中。

是否有已知的解决此问题的方法？

Answer 1

我不确定为什么会发生这种情况，但是如果您删除 overflow-x 和 transform 属性，屏幕外的内容将变得可点击。

.filter-values-indexed{
    column-width: 165px;
    /*overflow-x: auto;*/
    max-height: 250px;
    /*transform: translateZ(0);*/
}

此水平滚动条将移动到页面底部。根据您的具体需求，这可能是一个临时修复。

Answer 2

如果您可以编辑 HTML，加上一些额外的标记，则可以解决将 .filter-values-indexed div 包装在另一个元素中并应用溢出到这个新元素。

HTML:

<div class="wrap">
  <div class="filter-values-indexed">
  [...]
  </div>
</div>

CSS:

.wrap{
  overflow-x:scroll;
}
.filter-values-indexed{
  width:100vw;
  column-width: 200px;
  max-height: 250px;
}

Chrome 列宽呈现问题

Chrome Rendering Issue with column-width

css

rendering

google-chrome