Why won't emojis render when rotated to 45 (or 315) degrees?

Question

I'm having a strange problem where rendering an emoji rotated to certain angles results in the emoji failing to appear.

This seems consistent across browsers, so I'm struggling to pinpoint the issue or a reasonable solution.

The code:

<style type="text/css">
  .container {
    background-color: #55d;
    height: 500px;
    padding: 50px;
    width: 500px;
  }
  .text {
    color: #fff;
    font-size:2em;
    margin: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
</style>

<div class="container">
  <div class="text">This is some text 😂</div>
</div>

See http://codepen.io/anon/pen/ORgQjb for a working example, note that changing the rotation, even to 44.5 degrees will bring the emoji back.

Does anyone have a suggestion as to why this occurs, or any workarounds?

Update Thanks to Paulie_D and some digging, it seems this issue only manifests itself on OSX (all browsers), and not Windows (tried IE/Firefox/Chrome).

Answer 1

I sure don't know why it happens, but after some tinkering, I do have a couple of fixes to share.

Webkit

If a Webkit-only fix is sufficient (e.g., if you're building an Electron app), you only need to add the CSS transform perspective(0), which has no visible effect, other than causing emoji to actually render.

So:

transform: rotate(45deg) perspective(0);

instead of:

transform: rotate(45deg);

Here's a fork of your example demonstrating that fix:

https://codepen.io/troywarr/pen/yEgEdr

and a reduced test case including a reference emoji to illustrate that perspective(0) doesn't change the emoji's appearance:

https://codepen.io/troywarr/pen/aKpKmx

Cross-browser

If you need a cross-browser fix, you can use a CSS animation that rotates starting at 45 degrees (or whichever multiple of 45 degrees that you need to fix) but is eternally paused:

@keyframes spin {
  0% {
    transform: rotate(45deg);
  }
}

.working-rotated-thing {
  animation: spin 1ms; /* animation-duration must be > 0 */
  animation-play-state: paused;
}

Here's a fork of your example demonstrating that fix (note that I enabled Autoprefixer to avoid messing with vendor prefixes):

https://codepen.io/troywarr/pen/mKRKZB

and a reduced test case:

https://codepen.io/troywarr/pen/oyByMx

This seems to work across browsers; I checked the latest Chrome, Firefox, and Safari in macOS High Sierra, and all were well.