Safariで一部のcssがを作動しない

Question

前提

html/css、jqueryを使い、練習として架空サイトを作りましたが、cssの一部がSafari（MacとiPhone）のブラウザだけうまく作動せず、困っています。

サイトは下記の2つになります。
①
https://pan-de-molde.y-miki-portfolio.com/
②
https://komugi-pan.y-miki-portfolio.com/

実現したいこと

①のサイト
バーガーメニューをクリックしたら右からスライドしてメニューが現れる
（jqueryでheaderにopenクラスを付けて、.menu-listをright:-100%;から0%にしてスライド表示）
−−−−−−−−−−−−−−−−−−
②のサイト
scrollしたら、各h2のサイドの飾りをanimationを使い出現させる
（jqueryでスクロール時に.h2-commonに.h2-animeというクラスを追加し、.pink-dotと.green-dotをanimationでopacity0→1、rotateY0→-180degにする）

発生している問題・エラーメッセージ

①menu-listだけが表示されない（jqueryでクリック時にheaderへのopenというクラス付与はできている）
−−−−−−−−−−−−−−−−−−−−
②.pink-dotと.green.dot2が出現しない

※他のブラウザでは問題なく見れています。safariで表示されない原因はなんでしょうか？

エラーメッセージ

エラーは出てない？ような気がします。　

該当のソースコード

Answer 1

• (1) https://komugi-pan.y-miki-portfolio.com/
• (2) https://pan-de-molde.y-miki-portfolio.com/

(1)と(2)のURLが説明と逆ですよね。

以下の対応をしてみてください。

• (2) バーガーメニューをクリックしたら右からスライドしてメニューが現れる
  • .menu-list に top: 0 プロパティを追加してください。
• (1) scrollしたら、各h2のサイドの飾りをanimationを使い出現させる
  • .h2-common に z-index: 0 プロパティを追加してください。

Comments

[miki-y]

ありがとうございます！
アドバイス通り追加しましたが、手元にSafariのブラウザがなく、後日確認します。せっかく教えて頂いたのに、すぐ確認できず、申し訳ありません・・。
確認できたらベストアンサー押させて頂きます！

[miki-y]

遅くなり申し訳ありません。
Safariで確認したらなおりました！ありがとうございました！