CSS3 transition behavior has odd effect with text wrap on floating element.

[schadeck]

I am placing a transition on the margin-top of an element, and I have run into an issue where the text does not wrap properly around a floated element. It appears to work just fine around most of it, but on the tail end it will appear above the floated element. It appears to work properly in the latest version of Firefox (mac), but not in Chrome/Safari (mac):

http://dabblet.com/gist/2704263

I was hoping someone might have some insight on why this is happening, and possibly a solution.

example:

[schadeck]

It appears that adding:

  position: relative;

to the floated element helps solve the issue.

[Author]

Posts