Overflow behavior after using CSS3 transform

Question

Please check the demo

I have two divs the first div is used for showing the scroll-bar and the second div is used for the rotation of inner contents of the div.

My question is why scroll-bar is showing even if there is no overflow of the inner contents.

Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this.

HTML

<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
    <div id="RotationDiv">
        <img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
    </div>
</div>

CSS

#RotationDiv {
    -ms-transform-origin: 539px 539px;
    -webkit-transform-origin: 539px 539px;
    width: 434px;
    height: 1096px;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

Answer 1

well i was having trouble causing overflow too

my problem was that horizontal scaling made horizontal overflow, so what i did was just change horizontal scaling to vertical scaling and it solved the problem (or bypassed the problem tbh)

my understanding to this bug is that since it has no common solution, thus just go around it.

Answer 2

You are using transform so it changes visual formatting model of an element.

From MDN:

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

A line again from MDN:

By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.

---

From W3C : 2 Module Interactions

This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

---

So you have a parent element with the dimensions below.

width: 1096px; 
height: 434px;

Now you are transforming that element using

-webkit-transform: rotate(90deg);

So here, the element transforms visually, but not literally, in other words though you transform an element, it takes the space physically on a document just like a static element takes, it just visually transforms the element. I will share a diagram which will make you understand in a better way..

So though you transformed your element like this, but still the vertical space was taken up because of the height of your transformed element, which did transformed visually, but not literally...

---

So, now what's the solution? Use position: absolute; on the child element, and anyways you are using position: relative; on the parent.

Demo

#RotationDiv {
    -ms-transform-origin: 539px 539px;
    -webkit-transform-origin: 539px 539px;
    width: 434px;
    height: 1096px;
    position: absolute;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

---

Lets have a test case, I've the styles like below

.parent .transformed {
    height: 200px;
    width: 200px;
    background: #f00;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -moz-transform-origin: 300px 300px;
    -webkit-transform-origin: 300px 300px;
    transform-origin: 300px 300px;
}

.parent .static {
    background: #00f;
    height: 200px;
    width: 200px;
}

Test Case

Here, I am transforming an element having class of .transformed so if you see, the element does transform and am also modifying the origin, but the next box won't move up, as the transformed element take up literal space in the flow, it doesn't get out of the flow like position: absolute; does, but well that's the separate concept.

So you need to use position: absolute; or your div will still take up space vertically and thus you see that scroll bar ...

---

Poopy IE Compatible Solution

As you commented, well, yes, IE will still show the scroll bar as the element which is positioned absolute still exists in the same dimensions, so what's the workout here?

• Firstly, you are transforming the element to set in the parent container, also, you don't need the overflow so the first question is if you don't need overflow than why use auto? You can use hidden.

• If not hidden to the parent, and you are looking forward to place some content beneath the transformed element, than better you wrap the transformed element inside another element with the same dimensions set to overflow: hidden; and make sure you move the position: absolute; property to this block. - Demo

• If still not happy? Then why transform entire element? transform relevant image only - Demo

Answer 3

This is because it is still using the vertical properties (Just as hmore009 said in the comments).

If we take a look here you can see what its doing so you know this is true.

Example 1:

So your height and width for the container are as follows:

width: 1096px;
height: 434px;

Now you have done the right thing and swap them for the transform #RotationDiv:

width: 434px;
height: 1096px;

This works fine if we were to change the container to overflow: hidden; this means we cant see any extra height.

DEMO HERE

---

Example 2:

But I guess for some reason you don't want to do that, probably due to not knowing why the overflow is caused. So lets take a closer look at what is going on.

If we remove the height from #RotationDiv the overflow is no longer there. Thats a bit wired isn't it? Well no, the height was was being used for both the transform and the vertical height.

DEMO HERE

---

So how can we know it was the height causing this?

Now if we give #RotationDiv the same height as the container we can see there is no overflow.

DEMO HERE

Now if we add 1px onto that height we get the overflow kicking in. Hmm, so the height must be causing this. Even tho we are transforming the height seems to still be being used for the vertical height in the container.

DEMO HERE

---

How can we fix this?

Well we already have seen one option, give the container overflow: hidden; or just removing it altogether. This will stop the scrolling within the container.

DEMO HERE

Or you could just get an image editor (there are some free online ones) and flip the image like that. Would save a lot of trouble doing it this way.

Other then that you could flip the image only remove #RotationDiv and give the container background: red;

DEMO HERE

How I would do it still using transform:

I would take off the overflow: auto;, remove the unneeded div and set the transform on the img.

It's up to you how you want to do it, there are many ways. The best way I would say it don't use transform and just flip the image using an image editor (e.g. Photoshop).

DEMO HERE