CSS列样式只适用于Chrome中的一列
我正在使用响应式照片网格研究WordPress主题。基本上它是一个div容器,它在3列中显示其子div元素。我在每个较小的div上添加了一些css悬停效果。CSS列样式只适用于Chrome中的一列
照片网格在Firefox上正常显示,但在Chrome浏览器中,只有第一列div显示为他们应该显示的内容。其他两列的图像不显示,但是当它们悬停时闪烁。
下面是代码片段或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 -->
有人提到here说他们设法通过将transform: translateZ(0)
添加到网格项来解决这个问题,以启用hardw是加速度,在这种情况下:
.grid-cell-container {
transform: translateZ(0)
}
这工作!谢谢@安德鲁克劳福德 –
我发现了一个解决方案通过在.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,你拯救了这一天! –
将transform: translateZ(0)
添加到网格容器固定它。显然它是enables hardware acceleration。
.grid-cell-container {
transform: translateZ(0)
}
删除filter: grayscale(100%);
在图像上也解决了问题。
感谢您的帮助!我希望Chrome解决这个错误。
对于我们来说,它可能会更清晰些,如果你用一些示例数据替换你的PHP,并将你的代码放到一个代码片段中 – SourceOverflow
@SourceOverflow编辑!谢谢,并对此表示歉意。 –