css - 为什么表情符号在旋转到 45(或 315)度时不会呈现？

Question

我有一个奇怪的问题，即渲染旋转到特定 Angular 表情符号会导致表情符号无法出现。

这在浏览器中似乎是一致的，所以我正在努力查明问题或合理的解决方案。

代码:

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

见 http://codepen.io/anon/pen/ORgQjb对于一个工作示例，请注意，将旋转更改为 44.5 度也会使表情符号恢复原状。

有没有人对为什么会发生这种情况或任何解决方法有任何建议？

更新
感谢 Paulie_D 和一些挖掘，这个问题似乎只在 OSX(所有浏览器)上出现，而不在 Windows(尝试过 IE/Firefox/Chrome)。

Answer 1

我当然不知道为什么会发生这种情况，但是经过一些修补之后，我确实有一些修复方法可以分享。

网络套件

如果只使用 Webkit 的修复就足够了(例如，如果您正在构建一个 Electron 应用程序)，您只需要添加 CSS 转换 perspective(0) ，除了导致表情符号实际呈现之外，没有任何可见效果。

所以:

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

代替:

transform: rotate(45deg);

这是您的示例的一个分支，用于演示该修复:

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

和一个简化的测试用例，包括一个引用表情符号来说明 perspective(0)不会改变表情符号的外观:

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

跨浏览器

如果您需要跨浏览器修复，您可以使用从 45 度(或您需要修复的 45 度的倍数)开始旋转但永远暂停的 CSS 动画:

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

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

这是您的示例的一个分支，演示了该修复(请注意，我启用了 Autoprefixer 以避免与供应商前缀混淆):

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

和一个简化的测试用例:

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

这似乎可以跨浏览器工作；我在 macOS High Sierra 中查看了最新的 Chrome、Firefox 和 Safari，一切都很好。