Плохая производительность элементов фиксированной позиции

Question

У меня проблема с фиксированным элементом на моем веб-сайте при прокрутке при просмотре с помощью Chrome.

При прокрутке страницы вверх и вниз элемент мерцает и дублирует себя.

Обычно, столкнувшись с этой проблемой, я, как правило, смог решить проблему с помощью простого z-индекса, но это не имеет никакого значения для этой конкретной проблемы.

Website Code Fiddle

Actual Website элемент в вопросе является черный прокрутки элемент на левой стороне.

Simplified Fiddle to isolate 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; } 

Кто-нибудь знает о причинах этой проблемы и возможного решения?

Answer 1

Мне удалось реплицировать проблему в Chrome и с помощью этого Link я добавил -webkit-backface-visibility: hidden; в элемент UL, и это, похоже, устранило проблему .. для меня как минимум. Не могли бы вы попробовать.

Хорошее объяснение этого вопроса можно найти по ссылке выше и более углубленный обзор проблемы можно найти Here

Отрывок из выше ссылке http://benfrain.com/improving-css-performance-fixed-position-elements/:

... добавление обратной видимости: скрытый; к элементам фиксированной позиции. Это остановило краску на свитке. Итак, у меня было приятное простое решение для моего собственного сайта, но я был раздражен. Я не понимал. ПОЧЕМУ это сработало: у меня были подозрения, но никаких фактических доказательств. В этих ситуациях я всегда делаю то же самое; спросите кого-то умнее.

... если элементы перерисовываются, грязный прямоугольник расчет делается на слой. Поэтому, если элемент находится на своем собственном слое, он не будет влиять на что-нибудь еще. Если вы рекламируете фиксированный заголовок - скажем - тогда, когда в нижней части страницы появится содержимое , будет только новое содержимое, которое должно быть окрашено . Без рекламы заголовок должен быть , перекрашенный в верхней части страницы. Вы можете удивиться, почему мы не делаем автоматически продвигаем элементы фиксированной позиции. Ответ: мы делаем для больших экранов DPI, но мы не для низкого DPI, потому что мы теряем сглаживание подпикселя по тексту, и это не то, что мы хотим от по умолчанию. На высоких экранах DPI вы не можете сказать, так что там безопасно.