列宽

Question

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

基本设置如下：

http://codepen.io/mattlacey/pen/BpEvWE

在transform: translateZ(0);被注释掉后，所有最初屏幕外的内容都不会被渲染，随之而来的是硬件加速渲染被强制执行并呈现。现在的问题是，即使它被渲染，元素也不能与之相互影响。我已经设置了两个onclick内联脚本，一个在＆＃34; A.L.C＆＃34;还有一个关于卡伦沃克眼镜＆＃34;。单击第一个作品，而第二个作品不起作用，因为它仅在因变换而显示的元素中。

这个问题有没有已知的工作？

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;
}