iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話 | MONOCHROME DESIGN｜東京杉並のフリーランスWEBデザイナー。WordPressホームページ/ウェブサイト制作

iOSでCSSでborder-radius と overflow:hiddenを指定した、角丸マスクが効かなくてハマった話 作っていたサイトで、ちょっと写真をカッコよく表示したいなと思いborder-radiusとoverflow:hiddenを利用した角丸マスクで表示するようなものを作りました。その時iOSで少しハマったので、その対処法などをご紹介します。 実際に作ったのが以下のようなものです。 See the Pen border radius & overflow hidden by monochrome (@monochrome-design) on CodePen. それなりに上手く出来たと思っていたのですが、スマホで見てみると丸くマスクされていない事が判明。。。 あれ？と思いmacのsafariで見てみると同じくマスクされていませんでした。しかし、chromeやfirefoxで