Q&A
先日たまたま気がついた事なのですが、
以前サイトにモーダルを実装していてそちらが「transition」を使用し表示をさせていました。
久しぶりにメンテを行おうとiPhoneでサイトを開いてみるとうまく表示がされませんでした。
なので他のブラウザで確認してみようと思い
Mac
Safari→13606.2.11
Google Chrome→69.0.3497.100
Firefor Quantum→62.0.2
iPhone
Safari→不明
Google Chrome→69.0.3497.105
Firefor→13.2
で
下記のようなHTMLの検証を行いました。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0"> 6<meta http-equiv="Content-Language" content="ja"> 7<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 8<script type="text/javascript"> 9$(function(){ 10 $('.fade_up').removeClass('fade_up'); 11}); 12</script> 13<style> 14div{ 15 -moz-transition: all 1s; 16 -ms-transition: all 1s; 17 -o-transition: all 1s; 18 -webkit-transition: all 1s; 19 transition: all 1s; 20} 21.fade_up{ 22 opacity: 0; 23 transform: translateY(150px); 24 -webkit-transform: translateY(150px); 25 -moz-transform: translateY(150px); 26 -ms-transform: translateY(150px); 27} 28</style> 29<title>テスト</title> 30</head> 31<body> 32<div class="fade_up"> 33 上がってきます 34</div> 35</body> 36</html>
結果は
iPhone
Google Chrome→69.0.3497.105
のみで挙動が正しくありませんでした。
iPhone
Google Chrome→68.0.3440.83
の端末があったのでそちらも確認したところ問題なく動きました。
おそらくバグではないのかとは思っているのですが、原因がわからず対応に困っています。
自分の記述方法が悪いのかとも思い今回は投稿をさせていただきました。
ご存知な方いらっしゃいましたらよろしくお願いいたします。
回答1件
0
ベストアンサー
iphone xs max ios12.0 で動いていることが確認できました。
こちらのサンプルではiphone, chromeともに正常に動作しております。
htmlを読み込んでから実行がされるようにJavaScriptの記述を</body>タグの直前に移動させてみてください。
動くサンプル：jsFiddle
投稿2018/10/13 23:38
編集2018/10/13 23:39
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/13 23:40