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>

此块重复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;
        }
    }
}

任何可能导致这种情况的想法都会有所帮助！正如我所说，它发生在多个不同的页面上，完全不同的部分，所以我不确定任何样式实际上都会存在。

Answer 1

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

要将页脚强制设置到页面底部，每个页面上的主要内容区域包含以下内容：

 height: 100%;
 overflow-y: auto;

删除这些解决了这个问题。

Google Chrome上的多重渲染问题

1 个答案: