Safari and Chrome, rotated text position

well I usually find the answer to my questions here, but this time I didn't, now I will ask my first one here! :)

I have some rotated text on my page and it is positioned using position: absolute as shown below:

.rotate-box .rotate-text{
    display: block;
    -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
    left: -45px;
    top: 170px;

<div class="rotate-box">
    <span class="rotate-text">Rotated text</span>


This works great in all browsers (with webkit) except Safari and Chrome, where the text is rendered about 90px lower than other browsers.

To prevent this, I added:

@media screen and (-webkit-min-device-pixel-ratio:0){
    .rotate-text {top: 80px !important;}


Now the text is in the correct place in all browsers, but that doesn't work for me ... Am I missing something?

I hate adding browser exception code, it tends to come back and bite you eventually ...: o

Regards, Anders


source to share

2 answers

Change this line:

-webkit-transform: rotate(90deg);



-webkit-transform: rotate(90deg) translate(-100px, 16px);


As you know this line is only used by webkit browsers (Safari, Chrome)

You may have to play around with the exact px numbers, but then you can get rid of the extra @media screen tag.



Take a look transform-origin

. Basically, you should be able to do transform-origin: 0 0;

(with all the prefixes, of course) and it will close the pivot at the top left, which is similar to what you want.



All Articles