1

I'm working on a WordPress theme with a responsive photo grid. Essentially it's one div container that displays its child div elements in 3 columns. I added some css hover effects on each smaller div.

The photo grid is displaying properly on Firefox, but in Chrome only the first column of divs are appearing as they should. The other two columns' images don't show, but they flash when hovered over.

Below is the code snippet or you can open it in Codepen (you'll have to open a Chrome browser and another browser to see the issue).

/* 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 -->
j08691
  • 204,283
  • 31
  • 260
  • 272
S T
  • 23
  • 4

4 Answers4

0

I found a solution by changing the columns properties to display: flex; in .grid-outer and adding %33.333 width to .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%;
}

You could even make the images "responsive" by adding media queries like this:

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

If you want to make it really 100% responsive I recommend you to play with flex attributes like flex-direction, justify-content, align-items, etc

If you want to know why your code was not working, well... I was reading and I found some bugs reports about Chrome and filter:grayscale(), I guess using filter + column-count is a Chrome's bug because if you delete just column-count and -webkit-column-count in your code all the images will work and the hover won't have any problem

pharesdiego
  • 119
  • 5
0

Someone mentioned here that they managed to fix this by adding transform: translateZ(0) to the grid item to enable hardware acceleration, in this case:

.grid-cell-container {
  transform: translateZ(0)
}
Andrea Crawford
  • 321
  • 2
  • 10
0

Adding transform: translateZ(0) to the grid container fixed it. Apparently it enables hardware acceleration. 

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

Removing filter: grayscale(100%); on the images also fixed the problem.

Thanks for the help! I hope Chrome resolves this bug.

S T
  • 23
  • 4
0

Try to make all/any of the following:

  • display: flex for the outer block
  • width: 100% for the multicolumn block
alex_1948511
  • 6,073
  • 2
  • 20
  • 21