Spoiler text slows site down [Firefox blur filter bug]

I’ve noticed that large blocks of spoiler text tend to make the site very slow and unresponsive on mobile. Scrolling becomes janky, and page elements often appear blurry for several (very long!) seconds until the browser has finished mining enough Bitcoin to fully render the canvas or whatever is going on. See attached screenshot for an example. Has anyone else had this issue?

So…not knowing a lot about this, a spoiler tag is literally just a tag. We’ve installed that functionality with a forum plugin mod that I believe is Javascript. I would almost say this issue is mobile and browser-dependent - how adept your browser is at handling that tag and, of course, your bandwidth. I have an iPhone and when I’m on 1 bar of LTE or on dreaded 3G everything takes forever to load. I noticed even the bars don’t matter much based on location. Inside a doctor’s office waiting room it says have a bar but still loads very slowly, if at all.

With a large amount of spoiler text, I believe your phone is applying the “blur” filter which is individual to the text and has to render that as well.

This might vary based on any other browser plugins you have running, or potentially security issues that limit JS as well. Does the same slowness occur when connected to WiFi? Maybe try a different browser if you have one available? (like Safari vs Chrome)

I just tested this on an iPhone SE running Chrome with WiFi turned off. 2 bars of LTE, and it loads just fine.

This is definitely true. The site loads the same amount of data for spoiler text and regular text. The only difference is the blur filter, which happens in the browser’s rendering engine.

At a guess, your browser is trying to perform the blur every time the page scrolls, rather than doing it once and scrolling the resulting canvas.

1 Like

What device are you on? (I predict you’re on an Android device.)

For what it’s worth, scrolling pages with a lot of blurred text (e.g. Spider and Web Invisiclues) performs pretty poorly with Firefox on my (admittedly long in the tooth) laptop.

It’s not bad enough to bother me, particularly since few threads have all that much spoiler text, but I can imagine it would be worse for someone browsing on a mobile device.

An easy fix would be to change the css for .spoiler-blurred :

filter: blur(0.5em);
background: black;
color: black;

I agree that removing the blur filter makes it perform a lot better/faster; you can feel it even just in Chrome Dev Tools.

(But I don’t know whether that’s configurable in any way.)

Just as another data point: I see the same issue as the original poster when using Firefox (68.11.0) on Android 9.0.
It seems that it doesn’t happen in Chrome, nor in the DuckDuckGo Privacy Browser App.

1 Like

If you search for “firefox blur performance” you’ll turn up a fair number of (open) complaints. (Mostly saying “this is way worse than in Chrome”.)

Yeah, I’m using Firefox on Android, and it does seem to work better in Chrome. Thanks all for the info. Unfortunately, I don’t know of a good way to customize site CSS on Firefox for Android. (It’s easy on desktop, but for me the problem is worse on mobile.)

I believe we could make a new forum theme which uses black-on-black instead of blurring for spoilers, but that would be mutually exclusive with other themes (and I’m not sure of the logistics of setting that up in the first place).

I filed an issue on Discourse’s own forum.

3 Likes

Can the spoiler plugin be modified to offer a display preference?

I realize this is getting into real work. Mostly I’m curious if Discourse plugins have the kind of architecture where they can include settable preferences.

Right. I don’t see the value in creating a specific “firefox no spoiler blur” alternate version of every forum theme. Actually the better opportunity might be to message the creator of the spoiler-blur mod plugin on Meta and ask maybe if they might consider a checkbox style option for “blur spoiler text/redact spoiler text”.

If this is even possible (@Dannii is pretty much the expert on the nitty-gritty of forum coding changes) I would probably be more inclined to create one specific “intfiction mobile” theme that could be the catch all for any special tweaks for mobile users.

(Now that we’ve been up a while, this might also be a good opportunity for a poll to determine whether we should actually cull out some infrequently-used or very similar themes.)

For my taste, the spoiler blur looks kinda cool, but I’d be fine with just overriding it to be black bars on all themes.

The Discourse team suggests this CSS:

.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; 
}

I think only the first rule is actually necessary. The hover filter blur is harmless enough, because it’s always just one element at a time, and you can’t even hover on Android touchscreens anyway.

The Discourse team points out that if you use a Nightly build of Firefox, blur performance is considerably improved. So before we switch everything to black bars, maybe just wait a few months and the problem will go away on its own?

2 Likes

I just downloaded Nightly to test this, and it’s true, it’s MUCH smoother that way, at least as good as Chrome. That’s good to know.

3 Likes

Actually, by using the RSS feeds, there are no spoiler tags so you see the full unhidden text anyway which is my preferred way of reading. I know that if I find a post with spoiler tags used, I ultimately un-spoiler them as I find they break up the text too much.
That’s just my preferred method as I am not too much worried about seeing something that I supposedly shouldn’t.
Perhaps there should be a subforum for spoilered posts only. :wink:

1 Like

Thanks everyone who’s been looking into this.

Sounds like it’s in the process of being rolled out across Firefox right now, with some platforms already having fixed versions. Do you think its worth trying to handle here or can you wait for the rollout to be completed?

Speaking only for myself (of course), I’d say that it’s not a big problem, because I could always switch to Chrome or DuckDuckGo Privacy Browser if I want to read a spoiler-heavy thread. So, I’d say it’s probably not worth the effort at the moment, and we can wait until Firefox rolls out the new version. (Actually, I don’t know how long changes usually take to propagate to the mobile version, considering that it’s a different codebase in another language; but hopefully not too long.)

We might want to re-evaluate the situation when IF Comp starts, because then there will be more spoiler-heavy threads with reviews and people asking for hints.

2 Likes

I think it depends how quickly the update can be expected to make its way into the regular Firefox distribution, and that’s a question I can’t answer offhand. I know there are features that have been in the Nightly build for many months without migrating into the regular build (e.g. the URL bar on the bottom) but I don’t know if that’s typical.