Spoiler blur performs badly in Firefox and Android

feature
1

On the intfiction.org Discourse forum, we talk a lot about puzzley adventure games, so the [spoiler] tag is a big help. In this topic there are tons of separate spoiler tags, one for each hint.

This page performs okay-ish on Google Chrome, but it performs badly on Firefox, and it doesn’t perform well on slow Android phones, either. It’s crazy slow on Firefox on Android. (Scroll down a bit to see what I mean.)

This is probably Firefox’s fault.

Nonetheless, I think the spoiler plugin should set spoiler text to use color: black; background: black instead of filter: blur(0.5em) on browsers/platforms that handle blur slowly/poorly (Firefox, Android)

3 Likes
2

Is there a way we can tweak this CSS ourselves?

1 Like
3

With CSS this should get what you described with a background that matches the text. Adding this to a theme component should override the plugin’s CSS… though it wouldn’t work for images in spoilers.

This would make the change in all browsers, you’d need to detect the user-agent in JS if you’d want to only target Firefox.

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

.discourse-no-touch .spoiler-blurred:hover {
  filter: none;
  /* you could add a different hover effect here */
}

.spoiled {
  background: transparent; 
}

It’s a shame to hear about the bad Firefox performance. We don’t officially support Firefox on Android, but it looks like it impacts Firefox everywhere. Maybe we should consider going back to our old method of using a text-shadow to create the blue instead of filter…

1 Like
4

It doesn’t impact my Firefox anymore looks like.

image
image1283×915 40.5 KB

Will benchmark it on Fenix/Fennec too.

https://bug925025.bmoattachments.org/attachment.cgi?id=8916282

4 Likes
5

What about an update to the mod to add a style check box for “blur spoilers/redact spoilers” - redact spoilers would cover spoiler text with a black bar that might save the browser from the overhead of rendering the text with a blur?

That would at least make it possible to create a specific “mobile” theme that could take all the speedier and mobile specific mods.

1 Like
6

Definitely also fixed on latest Firefox for Android!

Firefox Fennec Chrome Firefox Fenix
Screenshot_20200810-220614
Screenshot_20200810-2206141080×2160 44.6 KB
Screenshot_20200810-220643
Screenshot_20200810-2206431080×2160 50.3 KB
Screenshot_20200810-220652
Screenshot_20200810-2206521080×2160 47.8 KB
52k 10k 10k

So I’d say https://arewefenixyet.com/ means this is fixed in some countries with elsewhere coming in just a few weeks.

5 Likes
7

To be clear, I repro the slow-blur bug 925025 on that test page in Firefox 79.0 for macOS Catalina 10.15.5 on a 2019 MacBook Pro 16".

Firefox takes 96,141ms for a blur run; Chrome takes 9,998ms. Maybe this is fixed in nightly?

EDIT: Yup, it is. On 81.0a1 (2020-08-10) (64-bit), the attachment benchmark takes 10,006ms and the Discourse page full of spoilers renders quite smoothly.

So it sounds like maybe we should do nothing for now and just wait for Mozilla to roll out their fixes.

Thanks!

4 Likes
8

I believe the actual fix is webrender that is currently getting flipped as default per http://arewewebrenderyet.com/.

It is enabled already where most users are (Windows) and coming up elsewhere! It is also the first thing to enable on a new PC for us at the team :stuck_out_tongue:.

5 Likes