Error with Blur Spoiler

Contribute Bug

AI-generated summary

A user, Stranik, reported an issue with the Blur Spoiler feature where images are not displayed or appear shifted. sam asked the user to reproduce the issue on a demo site, which Stranik did, revealing console errors. sam flagged the issue to be addressed, and codinghorror suggested that eviltrout investigate, given recent changes to image handling code.

eviltrout identified the issue as a conflict between the spoiler alert plugin and lazy loading, causing images to be replaced with SVGs, which led to problems. The proposed fix involves hiding images in IE11 instead of blurring them, which simplifies the code and fixes the issue. codinghorror approved the solution, and eviltrout merged the changes, awaiting further feedback.

1

I’m not sure what’s going on. But the photo is not displayed, or in some cases they are shifted.

Created a post on the demo site:

https://try.discourse.org/t/test-blur-spoiler/1330

2

We reset try, can you reproduce this here?

1 Like
3

testing:

1
1670×331 30.6 KB

1
1670×331 30.6 KB

There are errors in the console.

2 Likes
4

@vinothkannans can you add this to your list, looks like something is bust in spoliers.

2 Likes
5

Likely related to the new image handling code we added @sam, might be best for @eviltrout to look at it since he touched it last.

3 Likes
7

Confirmed… yeah the bug is coming from lazy loading for sure… image.parentNode is null when it tries to switch it back in.

2 Likes
9

This was a lot more complicated than I thought it would be. The issue here is that our spoiler alert plugin replaces images with SVGs so that IE11 can blur them properly, since it doesn’t support CSS blurring. This would cause all sorts of issues with lazy loading because it could be partially loading an image which is suddenly swapped out for a SVG.

The spoiler alert plugin would also replace the SVG frequently which caused even more havoc. Here’s the fix I came up with:

https://github.com/discourse/discourse-spoiler-alert/pull/33

I didn’t merge it right away since it might be somewhat controversial - in IE11 I simply hide the image rather than blurring it. This fixes everything, and means less hacky SVG stuff to carry. The downside is a worse experience for a 5+ year old browser.

Thoughts?

8 Likes
10

Sounds totally :cool: to me! Especially if it is less code.

7 Likes
11

And it’s now merged. Let’s see if there’s any more feedback.

7 Likes