Question

在浏览Chrome时滚动时，我的网站上有固定元素的问题。

当向上和向下滚动页面时，元素会自动闪烁并重复。

通常在面对这个问题时，我通常能够通过简单的z-index解决问题，但这对这个特定问题没有任何影响。

Actual Website有问题的元素是左侧的黑色滚动元素。

以下是复制问题的简化小提琴代码：

// HTML

 <ul id="et-float-menu">
     <li class="et-float-menu-item1">
        <a id="scrollUp">
            <span><img /></span>
        </a>
    </li>
    <li class="et-float-menu-item2">
        <a id="scrollDown">
            <span><img /></span>
        </a>
    </li>
</ul>

<div class="jumptosection selected" id="section1">
    <h2>Section 1</h2>
</div>    
<div class="jumptosection" id="section2">
    <h2>Section 2</h2>
</div>    
<div class="jumptosection" id="section3">
    <h2>Section 3</h2>
</div>    
<div class="jumptosection" id="section4">
    <h2>Section 4</h2>
</div>

// JS
function changeSelection(sectionFrom, sectionTo) {
    if(sectionTo.length > 0) {
        sectionFrom.removeClass("selected");
        sectionTo.addClass("selected");
        jQuery("body").animate({scrollTop: sectionTo.offset().top});
    }
}

jQuery(document).on("click", "#scrollDown", function(){
    var currentSection = jQuery(".selected");
    var nextSection = currentSection.next(".jumptosection");

    changeSelection(currentSection, nextSection);

    return false;
});

jQuery(document).on("click", "#scrollUp", function(){
    var currentSection = jQuery(".selected");
    var prevSection = currentSection.prev(".jumptosection");

    changeSelection(currentSection, prevSection);

    return false;
});

// CSS

.jumptosection {
    height: 200px;
    background-color:#e8e8e8;
}

#et-float-menu {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #000;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

#et-float-menu a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
color: #fff;
}

#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }

#et-float-menu li {
display: block;
margin-left: 0;
}


.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
    .et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }

是否有人知道此问题的原因和可能的解决方案？

Answer 1

我设法在Chrome中复制了这个问题并使用Link我将-webkit-backface-visibility: hidden;添加到了UL元素中，它似乎解决了这个问题..至少对我来说。你可以尝试一下。

可以在上面的链接中找到对该问题的一个很好的解释，并且可以找到对该问题的更深入的评论Here

摘自上面的链接http://benfrain.com/improving-css-performance-fixed-position-elements/：

...添加背面可见性：隐藏;到固定位置的元素。   这就是停止在滚动上发生的油漆。所以，我有一个很好的   我自己网站的简单解决方案，但我很生气，我不明白   为什么这样有效：我怀疑但没有实际的证据。在这些   情况我总是做同样的事情;问某人更聪明。

...元素重绘时，脏矩形计算完成   层。因此，如果一个元素在它自己的层上，那么它将不会影响   还要别的吗。如果您提升固定标题 - 比如说 - 那么当内容时   出现在页面底部的只有新内容   需要画画。没有促销标题需要   重新粉刷在页面顶部。你可能想知道为什么我们不这样做   自动提升固定位置元素。答案是：我们这样做   对于高DPI屏幕，但我们不会因为DPI低而丢失   文本上的子像素抗锯齿，这不是我们想要的   默认。在高DPI屏幕上你无法分辨，所以它在那里是安全的。

固定位置元件性能不佳

1 个答案: