IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ
前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。 今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。 バグの詳細 IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。 対処法1 当該のflexアイテムにmax-widthを指定する。 flex: 1 1 75%; max-width: 75%; padding: 0 4rem 0 0; 対
iOS SafariはCSSのfilterを画像に大量に適用すると画像がバグる
SafariはCSSのfilterでバグる CSSのfilterはPhotoshopのように明度や彩度の調整などができて便利なので最近はよく使用しているWebサイトを見かけるが、iOS SafariだとCSSのfilterを画像に大量に適用すると一部の画像がバグるので注意が必要だ。 発生するのはiOS SafariなのでiPhoneやiPadなどで発生し、PC版のSafariだと発生しない。(そのせいで気付きにくい…) filterで画像がバグるサンプル 百聞は一見にしかずということでfilterで画像がバグるサンプルを作成した。 「画像にfilter適用」ボタンを押すとfilter: brightness(120%)が適用されて一部の画像がバグる。 一見問題なさそうなときでもスクロールすると画像の表示が乱れてバグが確認できることがあるので試していただきたい。 ※100%発生するバグではな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
