Invisible Pink Unicorns - a Firefox emoji rendering bug

by @edent | # # # # # | 7 comments | Read ~133 times.

Here's a curious bug I just discovered in Firefox 67 for Linux. Can you see this unicorn:
🦄

What happens if you use CSS to change the opacity of an emoji?

Here's a unicorn, with a pink font colour:

🦄 Unicorn

Let's wrap that in this scrap of CSS to make it 50% opaque.

color: rgba(255, 105, 180, 0.5);

🦄 Unicorn

Hopefully, you see a semi-transparent philosophical argument. What if we set the opacity to 0.0 - that is, completely transparent?

🦄 Unicorn

There's a shunicorn there. If you don't believe me, try highlighting it!

Now, let's try a see-though beastie, but this time adding a drop-shadow:

color: rgba(255, 105, 180, 0.5); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

Good! And now fully transparent text plus a drop-shadow:

color: rgba(255, 105, 180, 0); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

On Firefox, the text is invisible, but the emoji is completely visible - like this...

The upper image is partially transparent. The lower image is completely opaque.

This bug is not present on Firefox for Android, nor Chromium for Linux.

The only way on Firefox, to get a completely invisible pink unicorn plus a drop shadow is to use:

color: rgba(255, 105, 180, 0.002); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

color: rgba(255, 105, 180, 0.001); text-shadow: .2em .2em .2em #000;

🦄 Unicorn

0.002 is invisible, but 0.001 is visible.

I've raised this as a bug on Mozilla's Bugzilla.

In the meantime, if you can see the invisible pink unicorn, please let me know. Or contact a theologian.

7 thoughts on “Invisible Pink Unicorns - a Firefox emoji rendering bug

  1. Daniel says:

    You should include the details in the Graphics section of about:support in your bug report.

    1. @edent says:

      Any idea which bit? There's lots of info there.

      1. Daniel says:

        The useful bits? I don’t really know what would be useful. There is a lot of info there about your graphic stack and I’m assuming some of it would be useful to identifying issues with your graphic stack.

  2. mike says:

    I game same result as you with Firefox 67 on Linux. Also, if I click somewhere in the empty space above "believe" in "There's a shunicorn there. If you don't believe me," then hold down left mouse button and drag left to highlight the hidden text, as soon as the "n" at the end of "unicorn" is highlighted, the unicorn emoji gets displayed. I.e I can see "🦄 n" and that seems wrong.

  3. Evaryont says:

    Visting from FF 67 on Windows 10, and see the same behavior. Not 100% identical rendering though, due to using Microsoft’s emoji font rather than Twemoji.

  4. _benk says:

    FF66 & FF67 on OSX, rendering is identical to Chrome (e.g. the “invisible” unicorns are indeed invisible).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.