制作しているサイトにて、以下のコード部分のCSSがSafariでのみ反映されておらずに困っております。
Chrom、Edge、Firefoxでは問題なく表示が確認できている状態です。
css
.header-name { position: absolute; top: 2rem; left: 5rem; @include mq(sp) { position: absolute; top: 2rem; left: 3rem; } img { width: 30rem; height: auto; @include mq(sp) { width: 16rem; height: auto; } } }
Safariで表示が崩れた為に上記のコードを以下のように書き換えました。
CSS
_::-webkit-full-page-media, _:future, :root .header-name{ position: absolute; top: 2rem; left: 5rem; @include mq(sp) { position: absolute; top: 2rem; left: 3rem; } } _::-webkit-full-page-media, _:future, :root .header-imageLogo{ width: 30rem; height: auto; @include mq(sp) { width: 16rem; height: auto; } }
色々よとネット記事を探したのですが、上記の方法が多くて試したのですが、他に何か対処法があれば教えて頂きたいです!
よろしくお願い致します。
まだ回答がついていません
会員登録して回答してみよう