1

私はjQueryを使用slideUp()しており、背景、丸みを帯びた角、および。slideDown()を持つオブジェクトに使用しています。-webkit-gradientbox-shadow

何らかの理由で、この正確な組み合わせはChromeではうまく機能しません。

私の仕様では、下の2つの角は正方形（border-radius 0）であると言われています。これは、下の角に位置合わせされるためですが、上の2つの角は丸みを帯びています（border-radius large）。

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

問題は、アニメーション中slideUp()およびslideDown()アニメーション中（これらの遷移中のみであり、完了時ではない）、Chromeでは影が正方形に表示されることです。

画像： http： //i.stack.imgur.com/xGn12.png

私が気付いたいくつかのこと：

  1. border-radius値のほとんどの組み合わせは問題ありませんが、必要な値は問題ありません。これが私がテストしたいくつかの例でOKです：

    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ではすべてが正常に機能しているようです。

誰か考えがありますか？

4

0 に答える 0