CODEWITHSUNDEEP
csstwitter-bootstrapoperarotatetransformopera-blink
Illes Peter
Illes Peter

Reputation: 1674

CSS transform rotate text disappearing in Opera 27 Mac

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

Upvotes: 2

Views: 1278

Answers (1)

Aminoser
Aminoser

Reputation: 66

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

Upvotes: 5

Related Questions