列宽的 Chrome 渲染问题答案

【问题标题】：Chrome Rendering Issue with column-width列宽的 Chrome 渲染问题
【发布时间】：2017-02-17 01:04:20
【问题描述】：

我发誓这曾经可以正常工作，并且它在 iOS 下的 Safari 中仍然可以正常工作，但由于某种原因，它在 Chrome 中出现故障，并且显然（根据我们的客户端）在 IE 11 中。

基本设置在这里：

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

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

【问题讨论】：

标签： css google-chrome rendering

【解决方案1】：

如果您可以使用一些额外的标记来编辑 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;
}

【讨论】：

【解决方案2】：

我不知道为什么会这样，但是如果你删除了overflow-x 和transform 属性，屏幕外的内容就会变成可点击的。

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

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

【讨论】：

不幸的是，滚动条在底部会破坏其他东西，这只是复杂页面的一小部分！不过谢谢:)