.top-social img 的 backdrop-filter属性会导致大量的gpu占用

[meng-luo]

问题出处：

前端，封面社交区域

实际行为描述：

造成了大量gpu占用

复现步骤：

启用封面社交区域，社交网络图标选择第一个，回到首页，当显示封面区域时会占用大量gpu（风扇直接起飞，吃了3060 40%左右）

配置与环境：

• 问题页面：https://blog.dreamfall.cn/ 同时在文档中的博客也存在当前问题（https://networkos.club/ https://www.yateam.cc/）
• PHP 版本：8.2.14
• 数据库类型 / 版本：mysql8.2.0
• WordPress 版本：6.4.3
• 主题版本：2.6.3.1
• 浏览器：chrome 121.0.6167.86

截图（若有）

补充信息： 当注释掉backdrop-filter后gpu的占用正常

[github-actions[bot]]

@meng-luo，感谢你给 sakurairo 提出了 issue。ヾ(≧▽≦*)o 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[KotoriK]

我们backdrop-filter是这样的，不过这个好像也有点过于离谱了，每个图标能占9.7MB的显存，全页面100M。 抽空看下有没有更好的方案优化

[KotoriK]

涉事样式已经被瞳宝偷偷干掉了 54683d8834a52ad380ae12fea6c5d9fe23cd9ab5 等到2.6.4就会更新了 全剧终

[snowman]

请教是如何定位到 backdrop-filter 的, 我这边应该是 js 的 问题

复现网址: https://blog.imoeq.com/利用爬虫多线程快速自动下载禁漫天堂/

进入网页后, 禁用 javascript 就不卡了

// not work, still high cpu
$$("*")
  .filter(e => {
    var filter = getComputedStyle(e)["backdrop-filter"]

    return filter != "none"
  })
  .map(e => {
    console.log("set backdropFilter to none:", e)
    e.style.backdropFilter = "none"
  })