固定位置元素性能不佳

Question

使用 Chrome 浏览时滚动时，我的网站上有一个固定元素出现问题。

在页面上下滚动时，元素会闪烁并自我复制。

通常当遇到这个问题时，我通常能够使用简单的 z-index 解决问题，但这对这个特定问题没有任何影响。

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

这里是来自简化的 fiddle 的代码以重现问题：

// 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 元素并且它似乎解决了问题.. 至少对我来说。可以试试吗

可以在上面找到对问题的很好解释 link 并且可以找到对问题更深入的审查 Here

以上摘录linkhttp://benfrain.com/improving-css-performance-fixed-position-elements/:

...adding backface-visibility: hidden; to the fixed position elements. That was stopping the paint happening on scroll. So, I had a nice simple solution for my own site but I was annoyed I didn’t understand WHY that worked: I had my suspicions but no actual proof. In these situations I always do the same thing; ask someone way smarter.

… when elements repaint, the dirty rectangle calculation is done per layer. So if an element is on its own layer then it won’t affect anything else. If you promote a fixed header – say – then when content appears at the bottom of the page there is only the new content that needs to be painted. Without the promotion the header needs to be repainted at the top of the page. You might wonder why we don’t automatically promote fixed position elements. The answer is: we do for high DPI screens, but we don’t for low DPI because we lose sub-pixel antialiasing on text, and that’s not something we want to by default. On high DPI screens you can’t tell, so it’s safe there.

固定位置元素性能不佳

poor performance of fixed position elements

html

javascript

css

jquery