Google Chrome 上的多重渲染问题答案

【问题标题】：Multiple Rendering Issue on Google ChromeGoogle Chrome 上的多重渲染问题
【发布时间】：2014-10-01 15:32:18
【问题描述】：

我遇到了一个奇怪的问题，网页上的某些元素被渲染了两次，而且似乎仅限于使用 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;
        }
    }
}

任何关于可能导致此问题的想法都会有所帮助！正如我所说，它发生在多个不同页面的完全不同部分，所以我不确定任何样式实际上会贯穿始终。

【问题讨论】：

需要在现场看到它发生。
您还应该从现场发布实际的 css。
是的，我意识到在实时站点上看到它会更有帮助，但不幸的是无法做到这一点。所以认为css可能有一些作为可能原因跳出来的东西。

标签： jquery html css google-chrome rendering

【解决方案1】：

是的，我找到了导致 Chrome 渲染问题的问题，尽管它实际上与我在问题中发布的代码无关 - 但该解决方案可能会帮助遇到同样问题的任何人。

为了将页脚强制到页面底部，每个页面上的主要内容区域有以下内容：

 height: 100%;
 overflow-y: auto;

删除这些解决了问题。

【讨论】：