前提・実現したいこと
MonacaでWebサービスをiframeにてそのまま表示するアプリを作成中です。
固定のヘッダー・ナビゲーションはMonaca内にてOnsenUIを利用しておこない、コンテンツ部分はiframeで表示する仕様です。
発生事象
Androidでは問題なく表示されますが、iPhoneでは、iframe内をスクロールしていくと、かなりの頻度でスクロール位置がTOPに戻ります。おそらくaタグ等のリンクに触れた際に発生しているように見受けられます。
ちなみにOnsenUIを利用しない場合はこのような事象は発生しません。
OnsenUIのjsソースを調査してみましたが、現実時点では原因がわかっておりません。
おそらくこちらで質問されている方と同じ事象かと存じます。
https://teratail.com/questions/102670
該当のソースコード
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.js"></script> 9 <link rel="stylesheet" href="components/loader.css"> 10 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.min.css"> 12 13</head> 14<body> 15<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> 16<template id="page1.html"> 17 <ons-page id="page1"> 18 <ons-toolbar> 19 <div class="center">Page 1</div> 20 </ons-toolbar> 21 <iframe src="https://ja.monaca.io" width="100%" height="100%" frameborder="0"></iframe> 22 </ons-page> 23</template> 24 25</body> 26</html>
発生確認機種
iPhone7のiOS 11 & iOS 10
あなたの回答
tips
プレビュー