html - css3 height transition on an absolute positioned div to overflow auto fails

this example is pretty selfexplanatory i guess, and i have no idea, why the div first shrinks, and than pops to the right height.

here is the example code

  

    hover me!!
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  

and the CSS

.block {
  position: relative;
  height: 500px;
  width: 500px;
}

.abs {

  position: absolute;
  height: 40px;
  width: 200px;
  background-color: yellow;
  overflow: hidden;
}

.abs:hover {  height: auto; transition: height 1s; }

and here is a fiddle link, with the content: http://jsfiddle.net/3G7vG/

i test this with the chromium release Version 31.0.1650.63 Debian jessie/sid (238485) on my linux box

Answer

height:auto is not support as part of a transition in css3.

You should rather try min-height, max-height, or transform (using the scalex(aNumberBetweenZeroAndOne))

http://jsfiddle.net/LefQV/