CSS element transition height not working on chrome

Question

I was trying to make some animations with transition on css, and all but the height of elements worked. I'm using chrome, and some people with other browsers like safari told me that it was working, even tho I need it to work on all major browsers, and I'm currently trying to find a fix for chrome. Here is the fiddle: http://jsfiddle.net/VPCxq/2/

As you can see I have my element (#test), and in my css I have:

#test{
    height: 4vh;
    -prefixes-transition-property: height;
    -prefixes-transition-duration: 0.3s;
}
#text:hover{
    height:8vh;
}

but the height isn't animated. In the fiddle I've put other things just to show that they worked. Has anybody got a chrome fix for this?

Answer 1

You can't transition to or from auto. auto gets replaced with 0. Add:

#test {
    height: 4vh;
}

http://jsfiddle.net/bFJ29/