# Spoiler blur performs badly in Firefox and Android

**URL:** https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401
**Category:** Feature
**Created:** [August 10, 2020, 9:54pm UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401 "2020-08-10T21:54:24Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)
#### Post date: [August 10, 2020, 9:54pm UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/1 "2020-08-10T21:54:25Z")

</div>

On the [intfiction.org](http://intfiction.org) Discourse forum, we talk a lot about puzzley adventure games, so the `[spoiler]` tag is a big help. In [this topic](https://intfiction.org/t/spider-and-web-invisiclues/41693) 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.

> **[925025 - CSS blur filter is order of magnitude slower than Chrome](https://bugzilla.mozilla.org/show_bug.cgi?id=925025)**
>
> RESOLVED (bas) in Core - Graphics. Last updated 2023-03-25.

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)

---

<div class="post-metadata">

### Author: ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)
#### Post date: [August 10, 2020, 10:02pm UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/2 "2020-08-10T22:02:57Z")

</div>

Is there a way we can tweak this CSS ourselves?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 10, 2020, 10:11pm UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/3 "2020-08-10T22:11:30Z")

</div>

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.

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

```

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`…

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [August 10, 2020, 10:17pm UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/4 "2020-08-10T22:17:05Z")

</div>

> [@awesomerobot](#):
>
> it looks like it impacts Firefox everywhere.

It doesn’t impact my Firefox anymore looks like.

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/c/5c0f8225a9b8ea4b3cc232f55267718698d02343.png)

Will benchmark it on Fenix/Fennec too.

> **[Test for bug 925025](https://bug925025.bmoattachments.org/attachment.cgi?id=8916282)**

---

<div class="post-metadata">

### Author: ![Hanon\_Ondricek](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hanon_ondricek/32/336613_2.png) [@Hanon\_Ondricek](https://meta.discourse.org/u/Hanon_Ondricek)
#### Post date: [August 10, 2020, 10:17pm UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/5 "2020-08-10T22:17:14Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [August 11, 2020, 1:08am UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/6 "2020-08-11T01:08:02Z")

</div>

Definitely also fixed on latest Firefox for Android!

| Firefox Fennec | Chrome | Firefox Fenix |
| --- | --- | --- |
| ![Screenshot_20200810-220614](https://global.discourse-cdn.com/meta/original/3X/5/b/5b90a472c02c7ecdc7143e9fe68ff047572e4f60.png) | ![Screenshot_20200810-220643](https://global.discourse-cdn.com/meta/original/3X/c/8/c818c946e811c932a75b6480eaf277ce6ef5a9a3.png) | ![Screenshot_20200810-220652](https://global.discourse-cdn.com/meta/original/3X/5/b/5b6618f5a4054160a74272222b51d4221b497c37.png) |
| 52k | 10k | 10k |

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

---

<div class="post-metadata">

### Author: ![dfabulich](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dfabulich/32/108716_2.png) [@dfabulich](https://meta.discourse.org/u/dfabulich)
#### Post date: [August 11, 2020, 1:31am UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/7 "2020-08-11T01:31:35Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [August 11, 2020, 1:42am UTC](https://meta.discourse.org/t/spoiler-blur-performs-badly-in-firefox-and-android/160401/8 "2020-08-11T01:42:41Z")

</div>

I believe the actual fix is webrender that is currently getting flipped as default per [http://arewewebrenderyet.com/](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 😛.
