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

Question

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

.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で表示が崩れた為に上記のコードを以下のように書き換えました。

_::-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;
    }
}

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

Comments

[yambejp]

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

[soldier]

macを使用しております！

[soldier]

度々すみません。
特にコードは変更してないのですが、macのSafariでは無事に表示はされたました。
しかし、iphoneから確認すると、やは表示が崩れてしまう状態です。
(pcのSafariではレスポンシブの表示も問題ありませんでした)

クライアント様にはLINEでサイトのURLを共有しているのですが、LINEはキャッシュの状態が強く残ると聞いたこともあり、それも原因の一つかとも考えておりますがそのようなことも考えられますでしょうか？

試しにiphoneのメールアドレスでURLを添付して確認したところ、表示は崩れずに確認が出来ました。