Question

我遇到一个奇怪的问题，即将表情符号旋转到某个角度导致表情符号无法显示。

这在浏览器中似乎是一致的，所以我很难找出问题或合理的解决方案。

代码：

<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

如果只有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度开始旋转的CSS动画（或您需要修复的45度的任意倍数）但是永久暂停：

@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，一切都很顺利。

为什么旋转到45（或315）度时emojis不会渲染？

1 个答案:

的Webkit

跨浏览器