CSS3 animation bug
I have been playing about with CSS animations recently for something that will appear in a later blog post and i seem to have found an issue with CSS3 animations.
When an elements width a fluid height has the height changed by the animation things break in Opera, Safari and Chrome.
Have a look at a simple demo to see what i mean
The CSS
height: 300px;
width: 300px;
}
.target {
height: 10px;
overflow: hidden;
-webkit-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
}
.target:hover {
height: 100%;
}
So the set up for this is a parent with a fixed size and child elements with their height set to a small value so that they will all fit in. The height style is changed to 100% on hover, although this works with any pseudo selector.
The HTML
And here is the simple container and it’s child element, to dee this in you browser take a look at the demo and a width version of the demo behaves the same way.
You will need to use either Opera, Safari or Chrome as Firefox doesn’t support CSS animations yet. don’t bother even asking about IE
When the paragraph element is moused over it should smoothly expand up to the height of the parent container and then back down again when you take the mouse off
The problem is that isn’t what happens. The paragraph expands in one jump as if the animation styles weren’t applied at all. To see how it should look we only have to change the height of the paragraph tag in the css
height: 300px;
}
Now have a look at this version and enjoy the smooth slide.
So the issue seems to be when the animated dimension is defined by the content of an element rather than being explicitly set. I hope that this gets fixed soon as I have some fun ideas of what to do with an animated element with a fluid height
