# Non-square Emojis within spoiler tags have fixed size

**URL:** <https://meta.discourse.org/t/non-square-emojis-within-spoiler-tags-have-fixed-size/50740>\
**Category:** Bug\
**Created:** [2016 年9 月 27 日 17:52 UTC](https://meta.discourse.org/t/non-square-emojis-within-spoiler-tags-have-fixed-size/50740 "2016-09-27T17:52:02Z")\
**Posts on this page:** 5\
**Page:** 1

## AI 生成的摘要

The discussion revolves around an issue with non-square custom Emojis being resized to 20x20 when inside spoiler tags. [gkln](/t/-/50740/1) shared the CSS rule used to prevent resizing, which works except in spoiler tags due to the missing `title` attribute. [Falco](/t/-/50740/2) suggested adding a `xlink:title` to the `image` tag, but [gkln](/t/-/50740/3) believes it won't help due to the parent `svg` tag's fixed size. [gkln](/t/-/50740/3) also questioned whether the blur effect could be achieved with CSS only. Later, [Alex_P](/t/-/50740/4) noted that the issue appears to be fixed, with the Emoji now displayed correctly inside a spoiler tag.

<div class="post-metadata">

作者： ![gkln](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gkln/32/293382_2.png) [@gkln](https://meta.discourse.org/u/gkln)\
发布日期： [2016 年9 月 27 日 17:52 UTC](https://meta.discourse.org/t/non-square-emojis-within-spoiler-tags-have-fixed-size/50740/1 "2016-09-27T17:52:02Z")

</div>

Hi,

We added a set of non-square custom Emojis to our Discourse instance. To prevent them to be resized to 20x20 by the clients, we prefixed all of them with `_` and added the following CSS rule:

```plaintext
body img.emoji[title^=":_"] {
    width: initial !important;
    height: initial !important;
}

```

It works great but not when these Emojis are included in a spoiler tag. The `title` attribute is missing and nothing seems to allow us to prevent them to be resized to 20x20.

See a live example here:

[https://forum.detendusdupad.com/t/maxi-best-of-club-fifa-all-time/658/2](https://forum.detendusdupad.com/t/maxi-best-of-club-fifa-all-time/658/2)

which generates the following code for the Emoji:

```plaintext
<svg data-spoiler-id="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
  <defs>
    <filter id="blur-1"><feGaussianBlur id="gaussian-1" stdDeviation="0"></feGaussianBlur></filter>
  </defs>
  <image xlink:href="https://forum.detendusdupad.com/uploads/default/_emoji/_hollande.png?v=3" filter="url(#blur-1)" style="filter: url(#blur-1)" width="20" height="20"></image>
</svg>

```

Is it possible to add the `title` attribute to the outer SVG tag? If not, what workaround can we implement?

Thanks!

---

<div class="post-metadata">

作者： ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
发布日期： [2016 年9 月 27 日 18:23 UTC](https://meta.discourse.org/t/non-square-emojis-within-spoiler-tags-have-fixed-size/50740/2 "2016-09-27T18:23:44Z")

</div>

I can apply a `xlink:title` to the `image` tag, would it help?

---

<div class="post-metadata">

作者： ![gkln](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gkln/32/293382_2.png) [@gkln](https://meta.discourse.org/u/gkln)\
发布日期： [2016 年9 月 27 日 18:47 UTC](https://meta.discourse.org/t/non-square-emojis-within-spoiler-tags-have-fixed-size/50740/3 "2016-09-27T18:47:59Z")

</div>

I don’t think it would help since the parent `svg` tag also have a fixed size as attributes (`width="20" height="20"`). According to my CSS knowledge there is no way to select a parent element.

This is broader than this particular issue but can’t the blur effect be achieved with CSS only?

---

<div class="post-metadata">

作者： ![Alex\_P](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alex_p/32/163548_2.png) [@Alex\_P](https://meta.discourse.org/u/Alex_P)\
发布日期： [2019 年12 月 16 日 15:35 UTC](https://meta.discourse.org/t/non-square-emojis-within-spoiler-tags-have-fixed-size/50740/4 "2019-12-16T15:35:15Z")

</div>

看起来现在已经修复了？

```html
<span class="spoiled" style="background-color: transparent; color: rgba(0, 0, 0, 0); text-shadow: gray 0px 0px 0px; user-select: none; cursor: pointer;">
    <img src="....290.gif?v=9" title=":clkolcool:" class="emoji emoji-custom" alt=":clkolcool:" style="">
</span>

```

---

<div class="post-metadata">

作者： ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
发布日期： [2019 年12 月 17 日 06:04 UTC](https://meta.discourse.org/t/non-square-emojis-within-spoiler-tags-have-fixed-size/50740/5 "2019-12-17T06:04:24Z")

</div>