CSS transform rotate text disappearing in Opera 27 Mac

Question

My problem appears only in Opera (the newer, Blink versions, only tested in v27) and on Mac OSX. Now I know the % of usage for this browser is almost non-existent, but we use it internally in our company and this is an internal piece of software.

When I rotate the .company-info div, everything works fine, except the text disappears. It's actually there, I can select it and copy it, it just doesn't show.

Works fine in other browsers, Chrome, FF, even Opera 27 (Win).

Do you guys have any ideas or is this just an Opera bug?

(It happens with any font, so it's not the known font issue)

I have the following code:

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

Use translateZ(0) for text rotations in Opera 27.