Safariで表示した時にCSSが反映されていない為に表示が崩れてしまうので、対処法を教えて頂きたいです。

制作しているサイトにて、以下のコード部分のCSSがSafariでのみ反映されておらずに困っております。
Chrom、Edge、Firefoxでは問題なく表示が確認できている状態です。

css
1.header-name {
2  position: absolute;
3  top: 2rem;
4  left: 5rem;
5
6  @include mq(sp) {
7    position: absolute;
8    top: 2rem;
9    left: 3rem;
10  }
11
12  img {
13    width: 30rem;
14    height: auto;
15
16    @include mq(sp) {
17      width: 16rem;
18      height: auto;
19    }
20  }
21
22}

Safariで表示が崩れた為に上記のコードを以下のように書き換えました。

CSS
1_::-webkit-full-page-media, _:future, :root .header-name{
2
3  position: absolute;
4  top: 2rem;
5  left: 5rem;
6
7  @include mq(sp) {
8    position: absolute;
9    top: 2rem;
10    left: 3rem;
11  }
12
13}
14
15_::-webkit-full-page-media, _:future, :root .header-imageLogo{
16
17    width: 30rem;
18    height: auto;
19
20    @include mq(sp) {
21      width: 16rem;
22      height: auto;
23    }
24}

色々よとネット記事を探したのですが、上記の方法が多くて試したのですが、他に何か対処法があれば教えて頂きたいです！
よろしくお願い致します。

yambejp

2022/05/02 05:02

ハードやOSはなんでしょう？

soldier

2022/05/02 05:06

macを使用しております！

soldier

2022/05/02 06:19

度々すみません。特にコードは変更してないのですが、macのSafariでは無事に表示はされたました。しかし、iphoneから確認すると、やは表示が崩れてしまう状態です。 (pcのSafariではレスポンシブの表示も問題ありませんでした) クライアント様にはLINEでサイトのURLを共有しているのですが、LINEはキャッシュの状態が強く残ると聞いたこともあり、それも原因の一つかとも考えておりますがそのようなことも考えられますでしょうか？試しにiphoneのメールアドレスでURLを添付して確認したところ、表示は崩れずに確認が出来ました。