Débordement horizontal survenant avec des transformations CSS3 3D

Question

J'ai un problème avec http://mr.si/ avec la transformation 3D CSS3. Je le fais clairement pour m'amuser et explorer de nouvelles fonctions CSS mais ça me dérange.

Le problème se produit lorsque vous survolez les deux derniers éléments d'une ligne. En plus de l'effet voulu, quelque chose d'indésirable se produit - l'élément déborde horizontalement de façon spectaculaire et la barre de défilement horizontale apparaît, ce qui n'est pas agréable du tout.

Peut-être que c'est un bug WebKit mais il se produit dans la dernière version de Chrome Developer et dans Safari 5, donc ce n'est probablement pas le cas.

Une idée de ce que j'ai mal fait?

EDIT: A noter que j'ai changé le site donc ce n'est plus pertinente: P

Answer 1

Pour vous dire la vérité votre problème m'a laissé pantois, il ressemble à un bug de navigateur pour moi.

Cependant, j'ai trouvé une solution simple:

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

Il est plus d'un patch qu'un aperçu des raisons pour lesquelles il est fait des trucs bizarres, mais j'espère que ça aide.

À la votre!

Edit: a résolu le problème avec ....

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