Chromeのタブ付きiFrameでスクロールバーが消える理由

Question

iFrameに縦と横のスクロールバーが付いたタブ付きコンテナにiFrameを配置しました。他のタブに切り替えてから最初のタブにもう一度戻るまで、すべては問題ありません。突然スクロールバーが消えました！このフィドルを使用すると、これはChromeでのみ発生するように見えますが、FirefoxとIEはOKと思われます（最近のすべてのバージョン）。 CSSとiFrameコードで既にスクロールコマンドがあります。私はこれを修正するために何をすることができます誰でも任意のアイデア？フィドル：https://jsfiddle.net/5163yg4d/

https://code.jquery.com/jquery-1.12.4.js 
https://code.jquery.com/ui/1.12.1/jquery-ui.js 
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css 



    <div id="My_RH_BigContainer"> 
    <div id="RH_tabsContainer"> 

    <div class="sidebar"> 
     <div class="sidebar-img" style="display: block;"> 
     <label>Table 1</label> 
     </div> 

     <div class="sidebar-img"> 
     <label>Table 2</label> 
     </div> 

     <ul id="RH_TabsTable" class="nav-tabs"> 
     <li class="active"><a href='#Tabular1a_ws' rel="nofollow">Table 1</a></li> 
     <li><a href="#myblank" rel="nofollow">Table 2</a></li> 
     </ul> 

    </div> 

    <div id="TabContentID" class="tab-content"> 
     <div id="Tabular1a_ws" class="tab_pane"> 

     <iframe name="New_country_TABULAR" id="New_country_TABULAR" scrolling="yes" src="https://c2amf323.caspio.com/dp.asp?AppKey=3eb8400026cba1edcbdb4b28b774">Sorry, but your browser does not support frames.</iframe> 
     </div> 

     <div id="myblank" class="tab_pane"> 
     </div> 

    </div> 
    </div> 
</div> 





#New_country_TABULAR { 
height: 200px; 
overflow: scroll !important; 
border: 1px solid #000 !important; 
width: 100%; 
} 

#My_RH_BigContainer { 
position: absolute; 
height: 360px; 
border: 1px solid red; 
top: 20px; 
left: 15px; 
width: 360px; 
} 

#RH_tabsContainer { 
Margin-top: 15px; 
Margin-bottom: 5px; 
Margin-left: 15px; 
Margin-right: 15px; 
border: 1px solid blue; 
height: 330px; 
padding: 0px 0px 0px 2px; 
} 

.sidebar-img { 
display: none; 
margin-top: 0px; 
height: 40px; 
background-color: lightgrey; 
border: 0px solid black; 
} 

.nav-tabs { 
border-radius: 0px 0px 0px 0px; 
border-style: solid; 
border-color: black; 
border-width: 0px 0px 1px 0px; 
background: transparent; 
} 

.nav-tabs > li { 
float: left; 
border-style: solid; 
border-color: black; 
} 

.nav-tabs > li > a { 
margin-right: 0px; 
border-radius: 1px 1px 1px 1px; 
background-image: none; 
outline-color: transparent; 
border: 0px solid grey; 
line-height: 16px; 
font-family: "Arial", sans-serif; 
font-size: 12px; 
font-weight: normal; 
text-align: center; 
height: 20px; 
width: 115px; 
} 

.ui-tabs-active { 
border-style: solid; 
border-color: black !important; 
border-width: 2px 2px 0px 2px; 
} 

.ui-tabs-active a { 
color: red !important; 
border-bottom: 1px solid #fff !important; 
margin-bottom: -1px; 
} 

.nav-tabs > li > a:hover { 
font-weight: bold; 
background: white; 
color: black; 
} 

#RH_TabsTable { 
border-bottom: 1px solid black; 
} 




    $(function() { 

    var index = 'qpsstats-active-tab'; 
    var dataStore = sessionStorage; 
    var oldIndex = 0; 
    try { 
    // getter: Fetch previous value 
    oldIndex = dataStore.getItem(index); 
    } catch (e) {} 

    $("#RH_tabsContainer").tabs({ 

    active: oldIndex, 

    activate: function(event, ui) { 
     // Get future value 
     var newIndex = ui.newTab.parent().children().index(ui.newTab); 
     // Set future value 
     try { 
     dataStore.setItem(index, newIndex); 
    } catch (e) {} 

     $('.sidebar-img').hide(); 
     $('.sidebar-img').eq(ui.newTab.index()).show(); 
    } 
    }); 
}) 

Answer 1

同じ問題がありました。私たちのソリューションは、各タブの変更によってjs経由でiFrameをリロードすることでした。

他の回避策を見てうれしいです。ありがとう！