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?


(Rafael dos Santos Silva) #2

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


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?