WebTecNote

[CSS3] border-radius + overflow:hidden の角丸が取れる

ゲージ作ってるとき発見した不具合(?)

border-radius+overflow:hiddenを掛けた要素の中に
border-radiusを掛けた要素を入れて、左に半分移動させた(縮小させる)もの。
移動方法をいろいろ変えてみたら、AndroidとiOS5以下で角丸が取れているパターンが2つあった。

  1. position:absolute+left
  2. translateX

以下は左からiOS6, Android2.3, Android4.0.4

回避策は見つかっていません

モバイルバージョンを終了