[CSS] border-radiusで作った半円がAndroid4で歪む

12年前

CSSで可愛いふきだしを作ってたらAndroid4だけ歪んでたというので発覚した不具合。

検証コードはこちら

CSS図形パターンの１つ、半円です。

div {
    background:blue;
    width:30px;
    height:15px;
    border-radius:0 0 15px 15px;
}

これをAndroid4.0, Android2.3, iPhoneで見比べると…

Android2.3(GALAXY S2)とiPhone5

GALAXY S3とoptimus it

Android4の描画が明らかにおかしい。
ちなみにheightを増やすと普通の円になる。