Non-square Emojis within spoiler tags have fixed size

bug
1

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:

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

which generates the following code for the Emoji:

<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!

2 Likes
2

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

1 Like
3

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?

4

Looks like it’s fixed now?

<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>
2 Likes