jquery - Google Chrome 上的多重渲染问题

Question

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

这个 block 重复了 3 次，基本上只是一个包含图像、标题和几个链接的 block 。它的 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;
        }
    }
}

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

Answer 1

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

为了强制页脚位于页面底部，每个页面的主要内容区域具有以下内容:

 height: 100%;
 overflow-y: auto;

删除这些解决了问题。