Invisible Pink Unicorns - a Firefox emoji rendering bug
bug emoji firefox linux unicode · 7 comments · 250 words · read ~209 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...
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.
You should include the details in the Graphics section of about:support in your bug report.
Any idea which bit? There's lots of info there.
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.
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.
Good spot!
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.
_benk says:
FF66 & FF67 on OSX, rendering is identical to Chrome (e.g. the “invisible” unicorns are indeed invisible).