Горизонтальное переполнение с CSS3 3D-преобразованиями

Question

У меня проблема на http://mr.si/ с 3D3-преобразованием CSS3. Я делаю это просто для удовольствия и изучения новых функций CSS, но это меня беспокоит.

Проблема возникает при наведении курсора на последние два элемента подряд. В дополнение к желаемому эффекту происходит что-то нежелательное - элемент переполняется горизонтально, а горизонтальная полоса прокрутки появляется, что совсем не нравится.

Возможно, это ошибка WebKit, но она встречается в последней сборке Chrome Developer и в Safari 5, поэтому, вероятно, это не так.

Любая идея, что я сделал неправильно?

EDIT: Стоит отметить, что я изменил сайт, чтобы это больше не актуальны: P

Answer 1

Сказать вам правду, ваша проблема оставила меня ошарашил, это выглядит как браузер ошибка для меня.

Однако, я нашел простое исправление:

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

Это больше, чем патч проницательности, почему он делает странные вещи, но я надеюсь, что это помогает.

Cheers!

Edit: решаемые его ....

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