◆ やっぱりバグ

この記事へのコメントの質問への解答です

これが問題の起きるコード
関係ないところは削って短くしています
<!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>

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>

サンプル
そのまま
対応後