3D-преобразования занимают место, даже если они выведены из потока?

Question

Я вращаю div в 3D пространстве. Это довольно просто:

<div class="holder"> 
    <div class="box"> 
    <p>This is some text.</p> 
</div> 
</div> 

.box { 
    background: orange; 
    color: #fff; 
    font-size: 6em; 
    transform: rotateY(60deg); 
    padding: 20px; 
    position: absolute; 
} 
.holder { 
    perspective: 300px; 
    max-width: 600px; 
    margin: 0 auto; 
} 

Я заметил, что в IE11 и Firefox, если преобразование делает форму выбежать из окна просмотра, он будет отображать полосы прокрутки. Это происходит, даже если элемент выходит из потока, установив положение: абсолютное. В Chrome не отображаются полосы прокрутки.

Мое понимание заключалось в том, что 3D-преобразования не занимают дополнительного пространства, чем не-3D-версия элемента, поэтому я не уверен, что в некоторых браузерах появляются полосы прокрутки. Это правильное поведение?

Answer 1

Да, это правильное поведение согласно спецификации: http://dev.w3.org/csswg/css-transforms-1/#transform-rendering

Для элементов, расположение определяется моделью CSS коробки, преобразование свойство не влияет на поток содержания окружающего трансформированного элемента. Однако степень области переполнения учитывает преобразованные элементы. Такое поведение похоже на то, что происходит, когда элементы смещаются через относительное позиционирование. Поэтому, если значение свойства переполнения прокручивается или автоматически, полосы прокрутки появятся по мере необходимости, чтобы увидеть контент, который трансформируется за пределы видимой области.

Общие обходной путь для такого поведения было бы установление overflow: hiddenhtml на элементе, а затем переустановку его auto или scroll ниже в DOM, в зависимости от потребностей.