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>
</div>
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
Change this line:
-webkit-transform: rotate(90deg);
to
-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.
source to share
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.
source to share