Non-square Emojis within spoiler tags have fixed size


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:

which generates the following code for the Emoji:

<svg data-spoiler-id="1" xmlns="" xmlns:xlink="" width="20" height="20">
    <filter id="blur-1"><feGaussianBlur id="gaussian-1" stdDeviation="0"></feGaussianBlur></filter>
  <image xlink:href="" filter="url(#blur-1)" style="filter: url(#blur-1)" width="20" height="20"></image>

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



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

1 Like

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?

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="">