W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:mH5mK3 さんの質問

CSSのkeyframesの中に、
@keyframes name {
0% {transform: translateY(0); }
100% {transform: translateX(200%);}
}
みたいに translateに%で指定を入れると、iPhoneで見たときに動かない場合があるんですが、これって解決法ありますか?

ちなみに、

  • translate以外の指定を入れる→それは動いてる
  • %じゃなくてpxで指定する→動く
  • 何度もリロードする→たまに動く
  • 動かない状態でSafariからホームに戻る、その後もう一度Safariに戻る→動いてる(!)
  • Chromeで確認→動かない
  • ドルフィンで確認→動かない
  • Evernoteのブラウザ表示で確認→動かない
  • Puffinで確認→動く(!)
  • Android機(ブラウザ)で確認→そもそもkeyframesがしんでいた
  • タブレットは未確認

お手上げですわ…………
お知恵を貸してください………

みんなの回答 1 件

ID:mH5mK3 さんの回答

なんとか解決しました〜
初回アクセスとリロード時→動かない
別ページから移動してきた時→動く
だったので、%の計算ができない?早すぎる?(ちょっと適当な表現が思い当たらないですが…)のではと思って、
@keyframesを使ってるアニメーション指定部分だけ抜き出したCSSを作成し、
javascriptでページ読み込みした後にそのアニメーション用CSSを読み込ませるようにしました。
結果初回アクセスとリロード時も動くようになりました〜
あまりないかもしんないですが…シェアしておきます

最終更新日:2016-11-09 (765 views)

関連するトピックス

ページ上部に戻る