CSS 变换 Opera 27 中消失的旋转文本 Mac

Question

我的问题只出现在 Opera（较新的 Blink 版本，仅在 v27 中测试过）和 Mac OSX。现在我知道这个浏览器的使用率几乎不存在，但我们在公司内部使用它，这是一个内部软件。

当我旋转 .company-info div 时，一切正常，只是文本消失了。它实际上在那里，我可以 select 它并复制它，它只是不显示。

在其他浏览器中工作正常，Chrome、FF，甚至 Opera 27 (Win)。

你们有什么想法吗？或者这只是 Opera 的一个错误？

（任何字体都会出现，所以不是已知的字体问题）

我有以下代码：

HTML

<div class="company-info">
    <img class="company-logo" src="media/logo-njoy.png" alt="nJoy" />
    <div class="pull-left">
        <span class="company-name">nJoy</span>
        <span class="contact-job-title">Lead Product Designer</span>
    </div>
</div>

SCSS

.company-info {
    @include rotate(-90deg);
    @include transform-origin(top right);
    background-color: $gray-dark;
    color: #ffffff;
    padding: 10px;
    position: absolute;
    height: 60px;
    right: 60px;
    top: 0;
    width: 225px;

    .company-logo {
        @include rotate(90deg);
        border-radius: 100%;
        float: left;
        height: 40px;
        margin-right: 10px;
        width: 40px;
    }

    .company-name {
        display: block;
        font-size: 13px;
        font-weight: 700;
    }

    .contact-job-title {
        display: block;
        font-size: 12px;
    }
}

Answer 1

在 Opera 27 中使用 translateZ(0) 进行文本旋转。

CSS 变换 Opera 27 中消失的旋转文本 Mac

CSS transform rotate text disappearing in Opera 27 Mac

css

twitter-bootstrap

opera

rotatetransform

opera-blink