Q&A
なにをもってSPのサファリとする？
OS は？
OSのバージョンは？
サファリのバージョンは？
端末の向きは？
クリックすると光るアニメーションをSafari上でも実装したい
作成したサイトがこちらです。
作成したアニメーションサイト
やりたいこと
■スマホ版のSafari上で中央のアニメーションを動かす
動作確認できたもの
・PC版chrome, safari
・SP版chrome
試したこと・参考サイト・確認したこと
WebKit CSS 拡張
【CSS】スマホで Media Queries が効かないときの対処法
携帯(使用しているiphone)のSafariがJavascriptをONにしているかの確認
■コード(codepen)
codepen
■備考（→Safariの設定について）
・最終的に、自分のSafariではアニメーションが動かなかったのですが、Safari上のJavascriptはONにした上で細々とした設定の変更は以下のようになってました（あとで細々とした設定ができることを知りました）
一つ一つONとOFFを検証しましたが、アニメーションが動くことはありませんでした・・・。やはり自分のiPhoneが古くiPhone 7plusだったためなのでしょうか？
長くなりすみません。
最後までいていただきありがとうございます。
あと端末の型は？
もか
ありがとうございます。
基本的な情報が抜けていました・・申し訳ございません。
■OSとver
iOS13.5.1
■Safariのバージョン
13.1.1
■端末の向き
縦
■端末の型
iPhone7 Plus 128GB ゴールド[Gold] MN6H2J/A
となります。
ご指摘いただき、ありがとうございます。
回答1件
0
ベストアンサー
iPhoneXのsafariで試しに表示してみましたが、アニメーション自体はちゃんと動いているように見えます。
（鏡面効果は無効のようです）
タップ時にアニメーションが動くのが見えてしまう（transparentの処理が他ブラウザと違うっポイ？）ので若干改変が必要かと思います。
変更点：
- -webkit 接頭辞を全て外した
- hover時にspanのアニメーションを停止させた
iPhoneのsafariでも期待通りの動作しているかな、と思われます。
投稿2020/07/22 18:34
総合スコア4447
ありがとうございます！
なるほど、やはり自分のiPhoneの問題だったんですね・・・
色々いじってSafariの細々とした設定を変えられるのを知り、変更したりして試してみたのですが、アニメーションが動くことはありませんでした。
ただ、最新の機種で動いていることがしれてよかったです！
>（鏡面効果は無効のようです）
タップ時にアニメーションが動くのが見えてしまう（transparentの処理が他ブラウザと違うっポイ？）ので若干改変が必要かと思います。
→ご指摘いただきありがとうございます。MacでSafariとchromeの挙動をみてみると、少しアニメーションが異なっていました。
これは・・・ブラウザごとにしっかり動くようにするにはかなり手のこんだ作りが必要になるなと思いました（みなさん大変な思いをしながらIEやSafariの対応もしているんですね）。
またcodepen上でアドバイスもいただきありがとうございます！たしかにhover時にアニメーションが必要なければ重くならないため、停止させておくのが良いと思いました！細かいところまでご指摘いただき、ありがとうございました。
あなたの回答
tips
プレビュー
