CSS 列样式仅适用于 Chrome 中的一列答案

【问题标题】：CSS columns styling only works on one column in ChromeCSS 列样式仅适用于 Chrome 中的一列
【发布时间】：2018-03-17 17:19:30
【问题描述】：

我正在开发一个带有响应式照片网格的 WordPress 主题。本质上，它是一个 div 容器，在 3 列中显示其子 div 元素。我在每个较小的 div 上添加了一些 CSS 悬停效果。

照片网格在 Firefox 上正常显示，但在 Chrome 中只有第一列 div 正常显示。其他两列的图像不显示，但它们在悬停时会闪烁。

下面是代码 sn-p 或 you can open it in Codepen（您必须打开 Chrome 浏览器和另一个浏览器才能看到问题）。

/* Grid styling */
        .grid-outer::before,
        .grid-outer::after{
            content:"";
            background-color: transparent!important;
        }
        .grid-outer {
            -webkit-column-count: 3;
            /* Chrome, Safari, Opera */
            /* Firefox */
            column-count: 3;
            -webkit-column-gap: 0px;
            column-gap: 0px;
            background-color: transparent!important;
            opacity: 1;
            overflow: hidden;
            position: relative;
            z-index: 500;
        }
        .grid-outer li {
            width: 100%;
            padding: 0px;
        }
        .grid-cell-container a{
            font-family: 'Oswald', sans-serif;
            line-height: 1;
            overflow: hidden;
            width: 100%;
            display: block;
        }
        .img-container {
            overflow: hidden;
            position: relative;
            background-color:black;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            padding: 0px;
            margin: 0px;
        }
        .img-container:hover {
            overflow: hidden;
        }
        .post-title-link img {
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            -webkit-filter: grayscale(100%);
            /* Ch 23+, Saf 6.0+, BB 10.0+ */
            filter: grayscale(100%);
            /* FF 35+ */
            width: 100%;
            opacity:0.7;
        }
        .post-title-link:hover img {
            webkit-filter: grayscale(0%);
            /* Ch 23+, Saf 6.0+, BB 10.0+ */
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
            /* FF 35+ */
            opacity:1;
        }
        .post-title-link .grid-title {
            opacity:0;
            display: block;
            text-shadow: 2px 2px 15px black;
            color: white;
            padding: 10px 10px 10px 30px;
            font-size: 150%;
            text-align: right;
            width: 70%;
            position: absolute;
            bottom: 10px;
            opacity:1;
            right:0px;
            -webkit-transition: all .2s ease-in;
            transition: all .2s ease-in;
        }

<div class="grid-outer">
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
            <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
            <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
            <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
            <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
            <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
            <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
           <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
            <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <div class="grid-cell-container">
        <!--  Image -->
        <div class="img-container">
             <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" />
                <div class="grid-title">Togepi</div>
            </a>
        </div>
    </div>
    <!-- end of the loop -->
</div>
<!-- .grid-outer -->

【问题讨论】：

如果你用一些示例数据替换你的PHP并将你的代码放入代码sn-p中，这对我们来说可能会更清楚
@SourceOverflow 已编辑！谢谢，对此感到抱歉。

标签： html css google-chrome cross-browser

【解决方案1】：

将transform: translateZ(0) 添加到网格容器修复了它。显然是enables hardware acceleration。

.grid-cell-container {
  transform: translateZ(0)
}

删除图像上的filter: grayscale(100%); 也解决了问题。

感谢您的帮助！我希望 Chrome 能解决这个错误。

【讨论】：

【解决方案2】：

有人提到here，他们设法通过将transform: translateZ(0) 添加到网格项以启用硬件加速来解决此问题，在这种情况下：

.grid-cell-container {
  transform: translateZ(0)
}

【讨论】：

【解决方案3】：

我通过将.grid-outer 中的列属性更改为display: flex; 并将%33.333 宽度添加到.grid-cell-container 找到了解决方案

.grid-outer {
   display: flex;
   display: -ms-flex;
   display: -webkit-flex;
   flex-wrap: wrap;
   opacity: 1;
   overflow: hidden;
   position: relative;
   z-index: 500;
}
.grid-cell-container{
  width: 33.333%;
}

您甚至可以通过添加这样的媒体查询来使图像“响应”：

@media all and (max-width: 480px){
   .grid-cell-container{
      width: 100%;
   }
}

如果你想让它真正 100% 响应，我建议你使用 flex 属性，如 flex-direction, justify-content, align-items, 等

如果您想知道为什么您的代码无法运行，那么...我正在阅读并发现一些关于 Chrome 和 filter:grayscale() 的错误报告，我猜使用 filter + column-count 是 Chrome 的错误，因为如果您删除只是column-count 和 -webkit-column-count 在您的代码中，所有图像都可以正常工作，悬停不会有任何问题

【讨论】：

哇这工作！非常感谢@pharesdiego，你拯救了这一天！