# Error with Blur Spoiler

**URL:** https://meta.discourse.org/t/error-with-blur-spoiler/105342
**Category:** Bug
**Created:** [December 30, 2018, 10:53pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342 "2018-12-30T22:53:13Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [December 30, 2018, 10:53pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/1 "2018-12-30T22:53:13Z")

</div>

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](https://try.discourse.org/t/test-blur-spoiler/1330)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 30, 2018, 10:55pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/2 "2018-12-30T22:55:09Z")

</div>

We reset try, can you reproduce this here?

---

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [December 30, 2018, 10:56pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/3 "2018-12-30T22:56:49Z")

</div>

testing:

 ![1](https://global.discourse-cdn.com/meta/original/3X/b/e/beca531ec135348b527de80b55279f352654f118.jpeg) 

 ![1](https://global.discourse-cdn.com/meta/original/3X/b/e/beca531ec135348b527de80b55279f352654f118.jpeg)

There are errors in the console.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 30, 2018, 11:01pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/4 "2018-12-30T23:01:00Z")

</div>

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [December 31, 2018, 1:20am UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/5 "2018-12-31T01:20:26Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 31, 2018, 1:22am UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/7 "2018-12-31T01:22:42Z")

</div>

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

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [January 2, 2019, 8:10pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/9 "2019-01-02T20:10:43Z")

</div>

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](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?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 2, 2019, 8:25pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/10 "2019-01-02T20:25:31Z")

</div>

> [@eviltrout](#):
>
> in IE11 I simply hide the image rather than blurring it. This fixes everything

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

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [January 3, 2019, 1:56pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/11 "2019-01-03T13:56:30Z")

</div>

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

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 3, 2019, 11:58pm UTC](https://meta.discourse.org/t/error-with-blur-spoiler/105342/12 "2019-01-03T23:58:39Z")

</div>


