ID:mH5mK3HpCB4k さんの質問

545 views

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

ちなみに、

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

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

登録日:2016-11-08 · カテゴリー:HTML・CSS

みんなの回答 1 件

2016-11-09 · トピ主 報告

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

回答の受付は終了しました。