CODEWITHSUNDEEP
3dcssscrollbaroverflowtransformation
Miha Rekar
Miha Rekar

Reputation: 1546

Horizontal overflow occuring with CSS3 3D transformations

I have a problem on http://mr.si/ with CSS3 3D transformation. I am doing it plainly for fun and exploring new CSS functions but it disturbs me.

The problem occurs when you hover over the last two items in a row. Additionally to wanted effect something unwanted happens - element overflows horizontally dramatically and horizontal scroll bar appears which is not pleasant at all.

Maybe its a WebKit bug but its occurring in the latest Chrome Developer build and in Safari 5 so probably it's not.

Any idea what I did wrong?

EDIT: Worth noting that I changed the site so this is no longer relevant :P

Upvotes: 1

Views: 392

Answers (1)

methodofaction
methodofaction

Reputation: 72405

To tell you the truth your problem left me flabbergasted, it looks like a browser bug to me.

However, I found a simple fix:

#main section {
overflow: hidden;
// the rest of your css declarations
}

It's more of a patch than an insight of why it's doing weird stuff, but I hope it helps.

Cheers!

Edit: Solved it with....

header[role="banner"], #main, #main + footer {
  overflow: hidden;
  padding: 0 20px;
  //yourcode
}

Upvotes: 1

Related Questions