Invisible Pink Unicorns - a Firefox emoji rendering bug


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.


Share this post on…

  • Mastodon
  • Facebook
  • LinkedIn
  • BlueSky
  • Threads
  • Reddit
  • HackerNews
  • Lobsters
  • WhatsApp
  • Telegram

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

      1. 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.

        Reply
  1. 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.

    Reply
  2. 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.

    Reply
  3. _benk says:

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

    Reply

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">