Safari and Chrome, положение повернутого текста идет haywire

Question

ну, я обычно нахожу ответ на мои вопросы здесь, но на этот раз я этого не сделал, теперь я попрошу свой первый здесь! :)

У меня есть повернутый текст на моей странице, и она расположена с помощью позиции: абсолютная, как показано ниже:

.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> 

Это прекрасно работает на всех браузерах (с WebKit) для Safari исключением и Chrome, где текст отображается примерно на 90 пикселей ниже, чем в других браузерах.

Чтобы предотвратить это, я добавил:

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

Теперь текст находится в правильном месте во всех браузерах, но это не чувствует себя хорошо для меня ... Я что-то здесь отсутствует?

Я ненавижу добавления браузера код исключения, он стремится вернуться и укусить вас в долгосрочной перспективе ...: о

С уважением, Андерс

Answer 1

Изменить эту строку:

-webkit-transform: rotate(90deg); 

в

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

Как вы знаете, эта линия используется только в Webkit браузеров (Safari, Chrome)

вы, вероятно, для воспроизведения с точными цифрами px, но затем вы можете избавиться от лишнего тега экрана @media.

Answer 2

Посмотрите на transform-origin. В принципе, вы должны быть в состоянии сделать transform-origin: 0 0; (со всеми префиксами, конечно), и он закроет вращение в верхнем левом углу, что походит на то, что вы хотите.