Issue: Browsers (FF5, Chrome12, IE9) are not recognizing css3 transforms applied to a child element inside a div when calculating the scrollHeight and scrollWidth of the containing div's scrollbars with "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>
A test on jsfiddle demonstrates this issue.
I am aiming to create an image viewer using css3 transforms for rotation and scaling. The goal is to have a fixed width/height containing div that allows scrolling to view the complete image content.
Any suggestions on how to efficiently resolve this problem or any workarounds would be greatly appreciated.