我遇到了一个奇怪的问题,网页上的某些元素被渲染了两次,而且似乎仅限于使用 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;
}
}
}
关于可能导致此问题的任何想法都会有所帮助!正如我所说,它发生在多个不同的页面到完全不同的部分,所以我不确定任何样式实际上是否会贯穿始终。
最佳答案
我已经找到导致 Chrome 渲染问题的问题,尽管它实际上与我在问题中发布的代码无关 - 但该解决方案可能会帮助遇到相同问题的任何人。
为了强制页脚位于页面底部,每个页面的主要内容区域具有以下内容:
height: 100%;
overflow-y: auto;
删除这些解决了问题。
关于jquery - Google Chrome 上的多重渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26144989/