CSS3 rotate rend les éléments pour les faire chevaucher les flotteurs

Question

J'ai un problème avec certains trucs CSS3, comme le titre le décrit. Dans mon site j'utilise quelques article « s qui ont un

article { 
    transform: rotate(1deg) 
} 

(plus les trois préfixes fournisseurs navigateur, à gauche pour la brièveté)

Pour garder le contenu à l'intérieur en ligne droite (juste l'arrière-plan est pivotée) Je tourne tous les éléments à l'intérieur des articles en arrière en utilisant

article > * { 
    transform: rotate(-1deg)'; 
} 

a l'intérieur des articles (ils sont les messages de blog) il y a habituellement deux ou trois p « s et parfois une image flottant à l'intérieur. Cependant, quand je flotte une image de droite comme ceci:

<article> 
    <p> 
    <a href="#"> 
     <img src="x.jpg" style="float: right" /> 
    </a> 
    </p> 
    <p>Content here</p> 
</article> 

La deuxième <p> se terminera à la gauche de l'image (parce qu'il flotte), mais parce qu'il est un élément de niveau bloc, il prendra la largeur du article et chevauchent l'image flottante rendant le lien non cliquable dans certains endroits. Quand je désactive le transform: rotate cela n'arrive pas, donc je pense que cela a à voir avec la façon dont la rotation est rendue. Le problème se produit dans Chrome et FireFox, IE ne supporte pas la rotation et Opera je n'ai pas testé.

Quelqu'un a une idée comment résoudre ce problème?

(exemple: http://www.stephanmuller.nl/portfolio/stephanmuller-nl/)

Answer 1

Alors, je suis allé sur une enquête pour traquer ce bug, et je trouve qu'il est re-rendu lorsque vous utilisez une propriété CSS transform (rotate non limité). Habituellement, les éléments qui viennent après un élément flottant savent qu'il ne doit pas se chevaucher mais circuler sous lui (le contenu flotte mais l'arrière-plan d'un paragraphe couvre toujours toute la largeur de l'élément conteneur, derrière l'élément flottant).

Lorsqu'un élément est pivoté, le navigateur ne prend pas en compte les éléments flottants. L'élément pivoté chevauche les éléments flottants. La même chose vaut pour les éléments relativement/absolument positionnés qui viennent avant l'élément pivoté dans le DOM; ils se chevauchent aussi.

Quelques cas de test: jsFiddle