webkit系のborder-radiusバグのメモ

webkit系でborder-radiusプロパティを使いスライドをした場合バグる。
http://webpad.felicyle.com/coding/webkit-border-radius/

webkit border-radiusとposition absoluteを組み合わせると不具合
http://hai3.net/blog/2012/07/31/webkit-border-radius%E3%81%A8position-absolute%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B%E3%81%A8%E4%B8%8D%E5%85%B7%E5%90%88/

percentage値は
・古い Chrome と Safariでサポートされていません(2010 年 9月に修正されました)
・Opera 11.50 以前ではバグがあります
・Gecko 2.0 (Firefox 4) 以前では非標準な方法で実装されています。縦横どちらの半径も、ボーダーボックスの幅に関係していました。
・古い iOS (5 以前) と Android (WebKit 532 以前)ではサポートされていません
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

う~ん。なんということだろう。
アニメーションしたりするとハマるよね。
初めから対応機種ほうがいいかもね。
情報提供していただいた上記サイトに感謝です。

投稿者:

ayako0802

フロントエンドエンジニア