Laggy css: парящие переходы на новейшей версии chrome

Question

Итак, я занимаюсь разработкой довольно простого сайта. На компьютере, на котором я работаю, я уже довольно давно использовал хром и не обновлял его, поэтому он остался на версии 67. Теперь я перешел на новейшую версию Chrome (79) и стал очень разочарован, увидев, что внезапно, без того, чтобы я изменил какой-либо код, переходы CSS в значительной степени больше не работают, как будто это было очень запаздывающим. (иногда он регистрирует зависание на элементе после очень большой задержки, иногда нет, когда это происходит, обычно он не регистрирует конец наведения ...). Тем не менее, я еще раз проверил старую версию хрома, я даже проверил IE, и он прекрасно работает в тех браузерах.

Вот html боковой панели, на которой элементы, о которых я говорю расположены (это не только на боковой панели, но я думаю, что это лучший пример):

<div id="sidebar">
    <h1 class="special-fx-opacity invisible">CONSTRUCTION REALIZATIONS</h1>
    <div class="sidebar-el">
        <h2 onclick="location.href = '[censored]';" class="special-fx-opacity invisible">Novus&Mediucs Clinic, Oslo</h2>
    </div>
    <div class="sidebar-sep special-fx-opacity invisible"></div>
    <div class="sidebar-el">
        <h2 class="special-fx-opacity invisible">House, Hvistenveien</h2>
    </div>
    <div class="sidebar-sep special-fx-opacity invisible"></div>
    <div class="sidebar-el">
        <h2 class="special-fx-opacity invisible">Krewetka Cinema, Gdańsk</h2>
    </div>
    <div class="sidebar-sep special-fx-opacity invisible"></div>
    <div class="sidebar-el">
        <h2 class="special-fx-opacity invisible">Houses in Mateblewo, Gdańsk</h2>
    </div>
    <div class="sidebar-sep special-fx-opacity invisible"></div>
    <div class="sidebar-el">
        <h2 class="special-fx-opacity invisible">House, Sweden</h2>
    </div>
    <div class="sidebar-sep special-fx-opacity invisible"></div>
    <button class=" button special-fx-opacity invisible">See all</button>

    <div id="social-media">
        <a href="[link censored]" target="_blank"><img src="../../imgs/fb-transparent-icon.png" alt="" class="social-media-icon special-fx-opacity invisible"></a>
        <a href="[link censored]" target="_blank"><img src="../../imgs/yt-logo-transparent.png" alt="" class="social-media-icon special-fx-opacity invisible"></a>
    </div>
</div>

и вот стили для элементов, которые, как предполагается, меняют цвет при наведении (добавлено z-index к попробуйте исправить проблему, но это ничего не помогло):

.sidebar-el h2{
    text-align: center;
    cursor: pointer;
    font-family: "Montserrat";
    color: #808080;
    line-height: 1.3em;
    font-size: 1.2em;
    font-weight: 200;
    transition-duration: 0.3s;
    z-index: 3;

}

.sidebar-el h2:hover{
    color: #cd1120;
}

, кроме того, на моей странице есть простой jquery, который проверяет смещение прокрутки, поэтому, когда элемент появляется на экране , он медленно появляется с анимацией (каким-то образом эта анимация работает идеально ...), наряду с созданием боковой панели, иногда фиксированной, а иногда нет, в зависимости от смещения.

$(window).scroll(function() {
   var hT = $('#photo-gallery-container').offset().top,
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);

    $('.special-fx-opacity').each(function(i,obj){
        if(wS > ($(obj).offset().top - wH)){
            $(obj).addClass('visible')
            $(obj).removeClass('invisible')
        }
    });
    if (wS > 100){
        $('#sidebar-container').addClass('visible')
        $('#sidebar-container').removeClass('invisible')
    }
    if (wS > wH){
        $('#sidebar-container').addClass('sidebar-container-fixed')
        $('#sidebar-container').removeClass('sidebar-container-stopped-top')
    }
    else{
        $('#sidebar-container').addClass('sidebar-container-stopped-top')
        $('#sidebar-container').removeClass('sidebar-container-fixed')
    }
    if (wS > (hT-wH) ){
        $('#sidebar-container').addClass('sidebar-container-stopped-bottom')
        $('#sidebar-container').removeClass('sidebar-container-fixed')
    }
   //if (wS > (hT- wH) && )
});

Я не знаю, как это JS может повлиять на все это, особенно на то, что все работает идеально на любом другом браузере (или даже на старых версиях chrome), но я подозреваю, что это на самом деле связанный, потому что в моем индексе. html, где нет боковой панели и нет отслеживания прокрутки, каждый: hover-переход хорошо работает даже в актуальном состоянии Chrome.

Вот chrome 79:

и вот Chrome 67:

Я полностью потерян, любая помощь оценена, кстати, у меня нет ошибок в консоли ...

Answer 1

Оказывается, это своего рода паранормальная проблема, исходящая из глубоко философской внутренней работы CSS ...

Я сделал сценарий слайд-шоу (вы можете увидеть его на гифках), и он изменяет ширину отображаемых фотографий, изменяя стиль макета, что приводит к задержке. Эта проблема очень хорошо описана в превосходной статье , которую я недавно читал, просматривая блоги разработчиков, так что это действительно пришло в голову, когда я начал проверять, был ли мой JS виноват. (огромное спасибо автору, Хосе Росарио, это на самом деле очень мало известно, я никогда не видел это нигде, и, как я только что узнал, это определенно практично)

Я сделал все тесты, и это действительно Оказывается, что во время анимации происходит переход стиля width на этапе рендеринга Layout , рендеринга box-shadow, color и других стилей. в фазе Живопись задерживаются. Эти изменения макета происходили почти все время, каждые 1,5 секунды, и анимация занимала около 0,8 секунды.

Тем не менее, это очень приятный на вид эффект, поэтому мне придется переписать все это, используя супер фантазии ультрасовременные составные стили, которые быстрее и не будут задерживать изменения стиля, представленные в живопись фаза, а также использование действительно впечатляющей GPU-рендеринга технология, как описано в статье, если позволяет время (развертывание сайта сегодня).

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

РЕДАКТИРОВАТЬ: Вместо того, чтобы делать совершенно новую вещь, я сделал что-то почти идентичное очень быстро, используя glide. js, который использует все фантастические приемы, описанные выше

РЕДАКТИРОВАТЬ # 2: (просто чтобы никого не вводить в заблуждение), видя, как слайд-шоу заикается, я не совсем уверен, скользить. js использует ВСЕ трюки из статьи, а именно я не думаю, что анимация визуализируется с помощью графического процессора, иногда она выглядит немного запаздывающей, но она очень минимальная

Answer 2

Я думаю, вы должны использовать: -

.sidebar-el>h2:hover{
color: #cd1120;
}

Или вы можете напрямую использовать: -

h2:hover{
color:#cd1120;
}

Это поможет мне, но если это не сработает для вас, то вы можно также использовать jQuery для эффекта наведения, как: -

$("h2").hover(function(){
$(this).css("color", "#cd1120");
}, function(){
$(this).css("color", "#808080");
}
);