みかづきブログ その3

3ヶ月つづけてみました。

backface-visibility を hidden にすると角丸の overflow: hidden が効かなくなる

border-radius をかけた要素の overflow を hidden にしたときに効いたり効かなかったりするなぁと思っていたんですが、backface-visibility が関係していた模様です。偶然発見しました。

DEMO

対策

compass/reset をつかうと全要素の backface-visibility が hidden に指定されるので、角丸の要素にoverflow: hidden が効かなくなります。角丸に overflow: hidden; をかけたい場合は その要素の backface-visibility を visble にしておきましょう。