Non-square Emojis within spoiler tags have fixed size

Contribute Bug

AI-generated summary

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

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