CSS3 rotate визуализирует элементы, чтобы они перекрывали поплавки

Question

У меня проблема с некоторыми элементами CSS3, как описано в заголовке. На моем сайте я использую пару article, которые имеют

article { 
   transform: rotate(1deg) 
} 

(плюс три префикса поставщиков браузеров, оставленные для краткости)

Чтобы держать содержимое внутри прямо вверх (вращается только фон), я поворачиваю все элементы внутри статей назад, используя

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

Внутри статей (это сообщения в блоге) обычно есть пара p и иногда плавающее изображение внутри. Тем не менее, когда я плаваю изображение прямо так:

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

Второй <p> будет располагаться слева от изображения (потому что он плавает), но поскольку он является элементом уровня блока, он будет занимать всю ширину перекрытия article и плавающее изображение делает ссылку недоступной в некоторых местах. Когда я отключаю transform: rotate, этого не происходит, поэтому я думаю, что это связано со способом рендеринга поворота. Проблема возникает в Chrome и FireFox, IE не поддерживает вращение, а Opera я не тестировал.

У кого-нибудь есть идеи как починить?

(пример: http://www.stephanmuller.nl/portfolio/stephanmuller-nl/)

Answer 1

Итак, я отправился на расследование, чтобы отследить эту ошибку, и обнаружил, что когда вы используете свойство CSS transform (без ограничения поворота), оно перерисовывается.Обычно элементы, которые идут после плавающего элемента, знают, что не перекрывают его, а текут под ним (например, содержимое плавает, но фон абзаца все еще охватывает всю ширину содержащего элемента, идущего за плавающим элементом).

Когда элемент поворачивается, однако браузер не учитывает плавающие элементы.Вращаемый элемент будет перекрывать плавающие элементы.То же самое касается относительно / абсолютно позиционированных элементов, которые находятся перед повернутым элементом в DOM;они тоже перекрываются.

Некоторые тестовые случаи: jsFiddle