Google Chrome上的多個呈現問題

我遇到了一個奇怪的問題，網頁上的某些元素呈現兩次，並且似乎僅限於使用Chrome。Google Chrome上的多個呈現問題

當在頁面上下滾動並導致元素被顯示時，似乎會出現該問題，但是其中一半直接在其自身上方重複。它發生在多個頁面上，涉及多個不同的部分 - 很難縮小到一件事。我首先假設這是一個JS問題，但是刪除了它仍然發生的所有腳本。下面的代碼只是一個部分的例子，它持續發生於：

<div class="service-holder"> 
    <div class="service-image"> 
      <a class="image-link" href="#"><img src="image-here" alt=""/></a> 
     </div> 
     <div class="service-text"> 
      <h2><a href="#">Short Title</a></h2> 
      <a class="arrow-link" href="#" title="">Link Here</a> 
      <a class="mobile-link" href="#"></a> 
     </div> 
</div>

該塊被重複3次，並且基本上是一個塊與圖像，標題，和它裏面鏈接耦合。它的CSS是：

.service-holder { 
    position: relative; 
    padding: 0; 
    margin-bottom: rem-calc(30); 
    .service-image { 
     .image-link { 
      display: block; 
     } 
     img { 
      width: 100%; 
     } 
    } 
    .service-text { 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     background: rgba(0,0,0,0.65); 
     padding: rem-calc(20); 
     h2 { 
      margin-bottom: 0; 
      a { 
       font-size: rem-calc(42); 
       color: #fff; 
       font-style: italic; 
       font-weight: 600; 
       text-transform: uppercase; 
       letter-spacing: -0.005rem; 
       line-height: rem-calc(30); 
      } 
     } 
     .arrow-link { 
      color: #fff; 
      font-weight: 600; 
      line-height: rem-calc(30); 
      letter-spacing: 0.2rem; 
      text-transform: uppercase; 
      &:focus, 
      &:hover { 

      } 
     } 
     .mobile-link { 
      display: block; 
      position: absolute; 
      left: 0; 
      right: 0; 
      top: 0; 
      bottom: 0; 
      z-index: 9999; 
     } 
    } 
}

任何想法可能是什麼原因會有所幫助！正如我所說，它發生在多個不同的頁面到完全不同的部分，所以我不確定任何樣式實際上都會出現在整個。

來源

2014-10-01 Quinny

需要看到它發生在一個現場。 – 2014-10-01 15:41:11

您還應該從實況網站發佈實際的CSS。 – 2014-10-01 15:59:58

是的，我意識到這將是一個更實用的網站上看到它，但不幸的是不能做到這一點。所以認爲css可能會有一些可能的原因跳出來。 – Quinny 2014-10-02 08:12:20

右鍵我找到了導致Chrome渲染問題的問題，雖然它實際上與我在問題中發佈的代碼無關 - 但該解決方案可能有助於解決相同問題的任何人。

要強制頁腳到頁面底部，每個頁面上的主要內容區域有以下幾點：

height: 100%; 
overflow-y: auto;

除去這些固定的問題。

來源

2014-10-03 12:24:03 Quinny

Google Chrome上的多個呈現問題

回答

相關問題