Переполнение: auto не работает с преобразованными дочерними элементами CSS3.Предлагаемый обходной путь? - PullRequest
Новая
       16

Переполнение: auto не работает с преобразованными дочерними элементами CSS3.Предлагаемый обходной путь?

10 голосов
/ 05 июля 2011

Проблема: преобразования css3, применяемые к дочернему элементу внутри div, игнорируются браузером (FF5, Chrome12, IE9) при вычислении scrollHeight и scrollWidth содержащих полосы прокрутки div при использовании «overflow: auto;». 

<style type="text/css">
div{ width: 300px;height:500px;overflow:auto; }
div img {
-moz-transform: scale(2) rotate(90deg);
-webkit-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
}
</style>    
<div><img src="somelargeimage.png" /></div>

Я собрал небольшой тест на jsfiddle, показывающий нежелательное поведение.

http://jsfiddle.net/4b9BJ/

По сути, я пытаюсь создать простой веб-просмотрщик изображений, использующий преобразования css3 для поворота и масштабирования, и хотел бы, чтобы содержащий div с фиксированной шириной / высотой имел возможность прокрутки, чтобы увидеть весь контент содержащегося в нем изображения.

Существует ли разумный способ решения этой проблемы или даже грубый обходной путь? Любая помощь приветствуется.

1 Ответ

3 голосов
/ 12 июля 2011

Я добавил дополнительный div к каждому из преобразований и, установив фиксированную ширину для этих div и переполнения отсечения, мне удалось сделать их правильными по размеру. Но тогда мне пришлось использовать положение: относительное и верхнее: бла; слева: бла, чтобы сдвинуть изображения в правильное положение. http://jsfiddle.net/4b9BJ/7/

...