CSS3 rotate renders elements to make them overlap floats

Question

I have a problem with some CSS3 stuff, as the title describes. In my website I use a couple of article's that have a

article { 
   transform: rotate(1deg) 
} 

(plus the three browser vendor prefixes, left out for brevity)

To keep the content inside straight up (just the background is rotated) I rotate all the elements inside the articles back by using

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

Inside the articles (they're blog posts) there's usually a couple of p's and sometimes a floating image inside. However, when I float an image right like so:

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

The second <p> will end up to the left of the image (because it floats) but because it's a block-level element it will take up the full width of the article and overlap the floating image making the link not clickable in some places. When I disable the transform: rotate this doesn't happen, so I think it has to do with the way the rotate is rendered. The problem occurs in Chrome and FireFox, IE doesn't support rotate and Opera I haven't tested.

Anyone have an idea how to fix?

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

Answer 1

So, I went on an investigation to track down this bug, and I found out that when you use a CSS transform property (not limited rotate) it is re-rendered. Usually elements that come after a floating element know not to overlap it but to flow under it (the content floats but the background of a paragraph for instance still span the entire width of the containing element, going behind the floating element).

When an element is rotated however the browser doesn't take in account the floating elements. The rotated element will overlap floating elements. The same goes for relatively/absolutely positioned elements that come before the rotated element in the DOM; they get overlapped too.

Some test cases: jsFiddle