固定位置元件的性能较差

Question

I have an issue with a fixed element on my website when scrolling when browsing with Chrome.

When scrolling up and down the page the element flickers and duplicates itself.

Usually when faced with this issue I have normally been able to resolve the issue with a simple z-index but this is not making any difference for this particular issue.

Website Code Fiddle

Actual Website The element in question is the black scroll element on the left hand side.

Simplified Fiddle to isolate the issue

Here is the code from the simplified fiddle to replicate the issue:

// 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; }

Is anyone aware of the cause of this issue and a possible resolution?

Answer 1

I managed to replicate the issue in Chrome and using this Link I added -webkit-backface-visibility: hidden; to the UL element and it seemed to fix the issue.. for me at least. Could you give it a try.

A good explanation of the issue can be found on the above link and a more in-depth review of the problem can be found Here

Excerpt from above link 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.