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

來源

2017-10-06 S T

對於我們來說，它可能會更清晰些，如果你用一些示例數據替換你的PHP，並將你的代碼放到一個代碼片段中 – SourceOverflow

@SourceOverflow編輯！謝謝，並對此表示歉意。 –

有人提到here說他們設法通過將transform: translateZ(0)添加到網格項來解決這個問題，以啓用hardw是加速度，在這種情況下：

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

來源

2017-10-06 02:34:39

這工作！謝謝@安德魯克勞福德 –

我發現了一個解決方案通過在.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所有圖像將工作和懸停不會有任何問題

來源

2017-10-06 02:10:14 pharesdiego

哇這個工作！非常感謝你@pharesdiego，你拯救了這一天！ –

將transform: translateZ(0)添加到網格容器固定它。顯然它是enables hardware acceleration。

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

刪除filter: grayscale(100%);在圖像上也解決了問題。

感謝您的幫助！我希望Chrome解決這個錯誤。

來源

2017-10-07 19:05:54

CSS列樣式只適用於Chrome中的一列

回答

相關問題