Spoiler blur在Firefox和Android上表现不佳

intfiction.org 的 Discourse 论坛上,我们经常讨论带有谜题的冒险游戏,因此 [spoiler] 标签非常有用。在 这个主题 中,有大量的独立 spoiler 标签,每个提示对应一个。

该页面在 Google Chrome 上表现尚可,但在 Firefox 上表现较差,在运行缓慢的 Android 手机上也是如此。在 Android 的 Firefox 上尤其慢得离谱。(向下滚动一点即可明白我的意思。)

这很可能是 Firefox 的问题。

尽管如此,我认为 spoiler 插件应针对那些处理模糊效果缓慢或效果不佳的浏览器/平台(如 Firefox、Android),将 spoiler 文本的样式设置为 color: black; background: black,而不是 filter: blur(0.5em)

3 个赞

我们自己能调整这个 CSS 吗?

1 个赞

使用 CSS,这应该能实现您所描述的文本背景与文字颜色匹配的效果。将此代码添加到主题组件中应能覆盖插件的 CSS……不过,这对 spoiler 中的图片可能无效。

这将在所有浏览器中生效。如果您只想针对 Firefox 进行设置,则需要在 JavaScript 中检测用户代理。

.spoiler-blurred {
  filter: none;
  background: var(--primary); 
  color:  var(--primary);
}

.discourse-no-touch .spoiler-blurred:hover {
  filter: none;
  /* 您可以在这里添加不同的悬停效果 */
}

.spoiled {
  background: transparent; 
}

听到 Firefox 性能不佳的消息很遗憾。我们官方并不支持 Android 版 Firefox,但看来这影响了所有平台的 Firefox。或许我们应该考虑回归旧方法,即使用 text-shadow 来生成蓝色效果,而不是使用 filter……

1 个赞

看起来它不再影响我的 Firefox 了。

我也会在 Fenix/Fennec 上进行基准测试。

4 个赞

是否可以为模组更新添加一个样式复选框,用于“模糊 spoilers/遮盖 spoilers”?遮盖 spoilers 会用黑色横条覆盖 spoiler 文本,这样或许能减轻浏览器渲染模糊文本的开销?

这样一来,至少可以创建一个专门的“移动”主题,整合所有更快速且针对移动设备优化的模组。

1 个赞

最新版的 Firefox for Android 也肯定已修复!

因此,我认为 https://arewefenixyet.com/ 表明该问题已在某些国家修复,其他地区也将在几周内陆续解决。

5 个赞

为了明确起见,我在 macOS Catalina 10.15.5 系统下的 2019 款 16 英寸 MacBook Pro 上,使用 Firefox 79.0 复现了测试页面中的慢速模糊 bug 925025。

Firefox 完成一次模糊运行耗时 96,141 毫秒;而 Chrome 仅需 9,998 毫秒。也许这个问题在 nightly 版本中已修复?

编辑:是的,已修复。在 81.0a1(2020-08-10)(64 位)版本中,附件基准测试耗时 10,006 毫秒,且充满隐藏内容的 Discourse 页面渲染非常流畅。

因此,看来我们目前或许无需采取任何行动,只需等待 Mozilla 发布其修复即可。

谢谢!

4 个赞

我认为实际的修复方案是 WebRender,它目前正根据 http://arewewebrenderyet.com/ 逐步作为默认选项启用。

在大多数用户所在的平台(Windows)上它已经启用,其他平台也将陆续支持!这也是我们团队在新 PC 上首先启用的功能::face_with_tongue:

5 个赞