javascript - 固定位置元素性能不佳

Question

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

当上下滚动页面时，元素会闪烁并 self 复制。

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

Website Code Fiddle

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

Simplified Fiddle to isolate the issue

这是来自简化的 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 元素，它似乎解决了这个问题……至少对我来说是这样。你能试一试吗？

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

以上链接摘录http://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.