質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

210閲覧

Safariブラウザでスクロール動作後オーバーレイが表示されない

lyzmfeqpxs54

総合スコア237

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/31 06:50

いつもお世話になっております。

現在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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問