こんにちは。CSS3にて正しく表示されない原因がわかりません。こちらはバグでしょうか。よろしくお願いいたします。
codepen.io/punimarin/pen/LVWmyK
Chrome/Safari/Firefoxの最新版での閲覧が意図した表示です。IE10と、iPhone6のSafariにて表示が異なっています。
=追記=IE11も同じ現象じゃんかよw
iPhone6 Safariの場合は下記を追加すれば正しく表示します。
.notepad { border-radius:1px;}
ありがとうございます！ひとまず更新しておきました。あとはIE10だけか…こちらも描画バグのような気がしますが真相はいかに…
autoprefixer とおせばよくね？
いわゆるベンダープレフィックスつけてもダメなんですよー
background-sizeの値変更したら表示されないかな
ありがとうございます！確かに奇数？だと表示されるようです。でも理由がわかりません。やはり描画バグなんでしょうか…
上の方が回答しているとおりbackground-size: 1px 1px, 1px 1px, 25px 25px;と変更したら表示されましたね。
上のコメント同様、ありがとうございます！私は転職して1年未満なのですが、正しく記述していてもよくわからないバグはあるんですねー。
みんなの回答 4 件
iPhone6 Safariの場合は下記を追加すれば正しく表示します。
.notepad {
border-radius:1px;
}
iPhone6 Plusでcssのbox-shadowが効かない時の対処方法
http://applian.jp/iphone6-plus-box-shadow/autoprefixer とおせばよくね？
background-sizeの値変更したら表示されないかな
上の方が回答しているとおり
background-size: 1px 1px, 1px 1px, 25px 25px;
と変更したら表示されましたね。
関連するトピックス