いつもお世話になっております。
現在RailsでWebページを作成しております。
画面右下に「cal」と名のついた要素があり、クリック(タップ)されると画面に黒いオーバーレイを表示、オーバーレイをタップするとそのオーバーレイが消えて元の画面になるよう下記のように記載しております。
PCやAndroid(共にブラウザはGoogleChrome)では正しく動作するのですが、iPhoneでSafariブラウザを用いた時に動作がおかしくなります。具体的に説明しますと、スクロール動作を行ったあとに「cal」要素をタップすると、反応せずオーバーレイが表示されない)、その後何回か「cal」要素をタップするとオーバーレイが表示され、その後は正しく動作します。
「iPhoneでSafariブラウザかつスクロール後」に動作がおかしくなるのですが、これにはどういったことが考えられますでしょうか。うまくデバッグができる情報でもかまいませんのでご教示いただけますと幸いです。
よろしくお願いいたします。
Ruby
1 2<style> 3.calendar_view:hover { 4 color: #fff !important; 5 background-color: #ed702b; 6 text-decoration: none; 7 } 8 9 .calendar { 10 position: relative; 11 z-index: 9999; 12 top: 200px; 13 width: 100%; 14 height: 690px; 15 display:none;.main { 16 width: 100%; 17 height: 100%; 18 } 19 .content-wrapper { 20 width: 100%; 21 height: auto; 22 } 23 24 .content1 { 25 width: 100%; 26 height: 500px; 27 background: #FF0000; 28 margin-top: 50px; 29 } 30 .overlay { 31 position: fixed; 32 top: 0; 33 left: 0; 34 width: 100%; 35 height: 100%; 36 background-color: #000000; 37 display: none; 38 opacity: 0.5; 39 } 40 41</style> 42 43 44 <main id="jsi-main" class="main"> 45 <a href="javascript:void(0);" id="jsi-open-overlay" class="open-overlay"></a> 46 <div class="content-wrapper"> 47 <div class="calendar"> 48 <div id="events_calendar"> 49 <%= render partial: "calendar", locals: {events: @events} %> 50 </div> 51 </div> 52 </div> 53 <div id="jsi-overlay" class="overlay"> 54 <a href="javascript:void(0);" id="jsi-close-overlay" class="close-overlay"></a> 55 </div> 56 </main> 57 58 <div class="calendar_view" id="calendar_view">cal</div> 59 60 61 62<script> 63/* スクロール位置を保持しつつ、オーバーレイを表示する */ 64 65var scrollPosition, 66 main = document.getElementById('jsi-main'), 67 overlay = document.getElementById('jsi-overlay'); 68 69//touchstartに対応してたらtouchstart、してなければclick 70var mytap = window.ontouchstart===null?"touchstart":"click"; 71 72var elm = document.getElementById("jsi-overlay"); 73elm.addEventListener(mytap, function(){ 74 overlay.style.display = 'none'; 75 main.style.position = 'static'; 76 main.style.top = 0; 77 window.scrollTo(0, scrollPosition); 78 console.log("オーバーレイ押された") 79 $(".calendar").css({ 80 "display": "none", 81 }); 82}, false); 83 84var calendar = document.getElementById("calendar_view"); 85calendar.addEventListener(mytap, function(){ 86 scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; 87 overlay.style.display = 'block'; 88 main.style.position = 'fixed'; 89 main.style.top = '-' + scrollPosition + 'px'; 90 var y = ((window.parent.screen.height - 685) / 2) + window.pageYOffset 91 console.log("cal押された") 92}, false); 93</script>
あなたの回答
tips
プレビュー