jQuery slide：Chrome中渐变背景对象的圆角阴影

Question

我正在使用jQuery slideUp()和slideDown()作为背景为-webkit-gradient，圆角和box-shadow的对象。

出于某种原因，这种确切的组合在Chrome中效果不佳。

我的规格说两个底角是正方形（边界半径0），因为它将与下面的东西对齐，但顶部的两个角是圆角的（边界半径大）。

http://jsfiddle.net/jdY3W/6/

问题是在slideUp()和slideDown()动画期间 - 仅在这些过渡期间，而不是在它们完成时 - 阴影在Chrome中显示为方形。

图片：http://i.stack.imgur.com/xGn12.png

我意识到的一些事情：

1. 边界半径值的大多数组合都可以，但我需要的值不是。以下是我测试过的一些例子：

   border-radius: 10px 20px 20px 20px;
   border-radius: 20px 20px 30px 0;
   border-radius: 20px 20px 20px 20px;
   border-radius: 20px 20px 19px 19px;
   

   有些不是：

   border-radius: 10px 20px 20px 25px;
   border-radius: 20px 20px 0 0; /* what I need */
   border-radius: 20px 20px 30px 30px;
   

2. 在Safari和FF中似乎一切正常。

有人有任何想法吗？