Laggy css：在最新版本的 Chrome 上悬停过渡

Posted 2023-05-08

【中文标题】Laggy css：在最新版本的 Chrome 上悬停过渡

【英文标题】：Laggy css :hover transitions on newest version of Chrome

【发布时间】：2020-06-07 21:02:30

【问题描述】：

我正在开发一个非常简单的网站。在我工作的计算机上，我使用 chromium 已经有一段时间了，还没有更新它，所以它停留在 67 版本。现在，我已经转移到最新版本的 Chrome (79)，我变得非常沮丧看到，突然之间，没有我更改任何代码，CSS 转换几乎不再工作了。就好像它非常迟钝。 （有时它会在很长的延迟后在元素上注册悬停，有时不会，当它这样做时，它通常不会注册悬停的结束......）。然而，我再次检查了旧版本的 chromium，我什至也检查了 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"  class="social-media-icon special-fx-opacity invisible"></a>
        <a href="[link censored]" target="_blank"><img src="../../imgs/yt-logo-transparent.png"  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;

$(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 上）运行得非常完美，但我怀疑它实际上可能是相关的，因为在我的index.html，没有侧边栏，也没有滚动偏移跟踪，即使在最新的 Chrome 上，每个 :hover 过渡效果都很好。

这是 Chrome 79：

这是 Chrome 67：

我现在完全迷路了，感谢任何帮助，顺便说一下，我在控制台中没有错误...

【问题讨论】：

support.google.com/chrome/thread/16855096?hl=en

@Gerard 这实际上与调试无关，我也没有使用 Chrome 金丝雀。这个线程甚至与这个问题有什么关系？问题是我在 gif 上显示的内容，CSS 动画本身不适用于最新的 Chrome 版本。

我有一种感觉，这将是风滚草问题之一......任何提示都表示赞赏，甚至可能没有答案

【参考方案1】：

我认为你应该使用：-

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

或者你可以直接使用：-

h2:hover
color:#cd1120;

这对我有帮助，但如果它不适合你，那么你也可以使用 jQuery 来实现悬停效果，就像：-

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

);

【讨论】：

css 样式并没有像我预期的那样改变任何东西，因为据我所知，实际上，如果你使用“>”或空格，它是一样的。无论哪种方式，我都想尽可能地避免使用 JS 和 jQuery，所以我会等到一些更好的答案出现，否则我想我会使用 jQuery animate 而不是像这样的基本样式更改。不过还是感谢您的帮助。

【参考方案2】：

原来这是一种超自然的问题，来自 CSS 的深刻哲学内部运作......

我做了一个幻灯片脚本（实际上你可以在 gif 上看到它），它改变了显示照片的宽度，从而改变了布局样式，这导致了延迟。这个问题在 excellent article 我最近浏览的开发博客中得到了很好的描述，所以当我开始检查我的 JS 是否有问题时，它确实浮现在脑海中。 （非常感谢作者 José Rosário，这实际上鲜为人知，我从未在任何地方看到过，而且我刚刚发现，它确实很实用）

我做了所有的测试，结果确实在动画的同时，width 样式的转换发生在 Layout 渲染阶段，渲染的 box-shadow、color 和 Painting 阶段的其他样式被延迟。这些布局变化几乎一直发生，每 1.5 秒一次，动画大约需要 0.8 秒。

不过，这是一个非常漂亮的效果，所以我将不得不使用超级花哨的 尖端技术 Composite 样式，速度更快，不会延迟Painting阶段渲染的样式变化，真正令人敬畏 em>GPU 渲染 技术，如果时间允许，如文章中所述（今天部署网站）。

再次向那篇文章的作者致敬，如果你处理高级前端，你应该明确地阅读它。以前没有人跟我提过这个，我前段时间偶然发现了这篇文章...... 浏览器中的样式渲染顺序

编辑：我没有制作全新的东西，而是使用glide.js 快速制作了几乎相同的东西，它使用了上述所有花哨的技巧

EDIT#2：（只是为了不误导任何人）看到幻灯片结结巴巴我不完全确定 glide.js 使用了文章中的所有技巧，即我不认为动画是 GPU 渲染的，有时看起来有点迟钝，但非常小