Javascript jQuery：同时设置元素位置和不透明度的动画

我有CSS样式的div元素：

.somediv {
    display: block;
    width: 100px;
    height: 100px;
    background: #4679BD;
    position: absolute;
    top: 10px;
    left: 100px;
    opacity: 0;
}

我想用jQuery动画改变div的位置。在这个动画过程中，我还需要更改不透明度

我尝试使用以下jQuery脚本执行此操作：

$('.somediv').animate({
  'top':'150px',
  'opacity':'1'
}, 1000);

它在Firefox中可以正常工作，但在Chrome中，动画无法正常工作。动画完成后，Div立即更改位置

p.S:如果我改为

position:relative

，那么它在两种浏览器中都能正常工作，但我需要使用

position:absolute

如何解决此问题？

这是小提琴。在两种浏览器中都尝试一下，您将看到不同之处：


----更新---

这就是它在Chrome和Firefox中的外观：

铬：Firefox:

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
对我来说，铬合金32.0.1700.76非常适合我。位置和不透明度动画都很平滑。
看起来这是Chrome bug

我使用了Chrome 33.0.1750.46 beta-m，但当我在34.0.1812.0版中测试时，它工作正常

谢谢你的回复
 这对我来说很难测试，因为我无法在我的chrome版本中复制它，但你可以试着用marginTop来代替吗

$('.somediv').animate({
  marginTop: '150px',
  opacity: 1
}, 1000);

同样适用于我的Chrome和FF。请查看更新的问题。谢谢回答。该方法在所有版本的chrome中都给出了结果。