在父容器的动画期间，绝对定位的子元素被剪裁

Question

I created a box that grows on hover. The box has a thumbnail inside it that is position:absolute and bigger than the parent box.

When I animate the width or height of the parent container, the thumbnail gets cropped to the size of the parent, but only during the animation.

See here for a simple demo (tested in chrome/safari/ff on mac): http://jsfiddle.net/Q2BPx/3/

What am I doing wrong?

Answer 1

I don't know that you are doing anything "wrong" per se.

When the animate method is running jQuery uses inline style to set the width for each frame of the animation. It also adds the style "overflow: hidden" into the inline style.

You can hack the css of expander by adding: overflow: visible !important;

This will prevent the inline overflow: hidden from making your thumbnail being cropped.

But, you might want to look into the jQuery code to see why animate is using the overflow setting.

Or, at least test your page to make sure you have not introduced an anomaly by using the overflow: visible !important;