Chrome で iframe を display:none; するとスクロールバーが消えるバグ
◆ やっぱりバグ
この記事へのコメントの質問への解答です
これが問題の起きるコード
関係ないところは削って短くしています
jQuery mobile を使っていて h4 のところがヘッダのバーになり クリックするとそのコンテンツが見えたり隠れたりするアコーディオンです
表示されるコンテンツが iframe です
問題の現象ですが
一度開いて閉じると 次に開くと iframe のスクロールバーが消えます
Firefox では起きずスクロールバー関係はバグの予感がします
ぐぐると
stackoverflow
http://stackoverflow.com/questions/38557971/iframe-scrollbar-disappears-on-chrome-when-visibility-changes
chromium bugs
https://bugs.chromium.org/p/chromium/issues/detail?id=641881
Chrome 52 からのバグのようです
Chromodo 52 でも再現しています
display: none; にするとダメらしいので とりあえず stackoverflow の回答にもあるように display: none; にしないようにします
今回のでは jQuery mobile の機能で非表示のときには ui-collapsible-content-collapsed クラスがつけられています
「.ui-collapsible-content-collapsed」 セレクタに display: none; が設定されているのでこれを上書きすると解決できます
サンプル
そのまま
対応後
これが問題の起きるコード
関係ないところは削って短くしています
<!doctype html>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"/></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"/></script>
<div id="a" data-role="collapsible">
<h4>+</h4>
<iframe src="http://livedoor.blogimg.jp/netomemo-techpc/imgs/9/9/995545d6.png"></iframe>
</div>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"/></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"/></script>
<div id="a" data-role="collapsible">
<h4>+</h4>
<iframe src="http://livedoor.blogimg.jp/netomemo-techpc/imgs/9/9/995545d6.png"></iframe>
</div>
jQuery mobile を使っていて h4 のところがヘッダのバーになり クリックするとそのコンテンツが見えたり隠れたりするアコーディオンです
表示されるコンテンツが iframe です
問題の現象ですが
一度開いて閉じると 次に開くと iframe のスクロールバーが消えます
Firefox では起きずスクロールバー関係はバグの予感がします
ぐぐると
stackoverflow
http://stackoverflow.com/questions/38557971/iframe-scrollbar-disappears-on-chrome-when-visibility-changes
chromium bugs
https://bugs.chromium.org/p/chromium/issues/detail?id=641881
Chrome 52 からのバグのようです
Chromodo 52 でも再現しています
display: none; にするとダメらしいので とりあえず stackoverflow の回答にもあるように display: none; にしないようにします
今回のでは jQuery mobile の機能で非表示のときには ui-collapsible-content-collapsed クラスがつけられています
「.ui-collapsible-content-collapsed」 セレクタに display: none; が設定されているのでこれを上書きすると解決できます
<style>
.ui-collapsible-content-collapsed{
display: block;
visibility: hidden;
position: absolute;
}
</style>
.ui-collapsible-content-collapsed{
display: block;
visibility: hidden;
position: absolute;
}
</style>
サンプル
そのまま
対応後
COMMENT
コメント一覧
-
- 2017/05/02 19:14
- ありがとうございました！
ご提示の<style>で、回避できました。
ところで、今日は、jQuery mobileのDialogで嵌ったのですが、調べてみると１．４から非推奨ということで、
もう使えないのですね。（Popupで逃げました）
しかしながら、Popupを Alertのようにそこで止まってくれるように記述したかったのですが、
難しいのであきらめました。
でも、
$("#、、、").on('popupafterclose', function(){、、、
だと、一連の処理が、２つの部分に断絶するのが辛いです、、、
-
- 2017/05/02 20:13
- jQuery mobile は全然使ったことないので詳しいことはわからないですが
画面までと クリックのリスナからが別なのはよくあるものかと思います
await 使ってそれっぽいこともできなくはないです
http://var.blog.jp/q/170502-1.html
IE のような古いブラウザでは動きません
Edge は CreatorsUpdate で使えるようになるので Edge/Firefox/Chrome
で動けばいいのなら使えます
-
- 2017/05/02 20:54
- awaitの例、ありがとうございます。
これが使えれば、すっきりしますね。
ただ、僕が作っているのは、数式処理システムで、IE11でも動く必要があり、残念です。
（PC以外にAndroid、ｉPhone、ｉPadが対象です）
-
- 2017/05/02 22:17
- IE11の対応が必要だと動かない機能が多くて大変ですね
がんばってください
-
- 2017/05/03 11:29
- ありがとうございます。
処理の中核部分は、php なので、Jqueryの部分は、そんなに凝ったことは、していないです。
（ダブルクリックで行(式）全体を選択状態にするとか、<Div>にスクロールバーをつけるくらい）
ただ、何分素人なので、よくハマってしまいます（涙）
MacユーザやLinuxユーザもあるので、safariやoperaでも動かすつもりなんですが、
道は遠いです、、、
