ons-splitter-sideを使用した場合、背後の画面がswipeされてしまう。

###前提・実現したいこと
掲題の件となりますが、ons-splitter-sideでside画面をopenした際、side画面を上下にswipeすると
背後の画面がswipeされてしまいます。これを改善する方法はありますか？

補足１ side画面のコンテンツが長く下にスクロールする場合、上記は発生しません。
補足２関連事象か不明ですが、pageAからpushPageでpageBをpushした場合も
pageBでswipeし、popPageするとpageAがスクロールしています。(補足１同様pageBがスクロールしないことが前提）

よろしくお願いいたします。

追記
content.htmlを追記しましたが、特に内容はありません。
強いて言うならons-navigatorを使用しているため、ons-templateがつかわれています。

これでもスクロールします。
CotentCtrl内では何もしていません。

###発生している問題・エラーメッセージ
なし

###該当のソースコード

		<ons-splitter>
			<ons-splitter-side id="hoge" side="left" width="90%" collapse swipeable>
				<ons-page>
					
				</ons-page>
			</ons-splitter-side>
			<ons-splitter-content id="fuga" page="content.html"></ons-splitter-content>
		</ons-splitter>

	<ons-template id="content.html">
            <ons-page ng-controller="ContentCtrl as content">
                  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
            </ons-page>
	</ons-template>

###補足情報(言語/FW/ツール等のバージョンなど)
monaca クラウドIDE
onsenUI2.2

akabee

2017/04/03 13:53

再現できないのですが、もう少しソースコードの情報をいただけませんか。とりあえず最小構成で試してみようとしましたが、content.htmlが見つからないということでエラーになりました。ちなみに私もons-splitter-sideは使用していますが、ご提示のような事象は発生していません。

lion_

2017/04/03 14:08

追記ありがとうございます。追加編集しました。よろしくお願いいたします。

akabee

2017/04/03 14:10 編集

monacaデバッガーにて再現確認してみましたが、再現できませんね・・・。ちなみに確認はAndroid端末です

lion_

2017/04/03 14:31

なるほど・・・こちらはiOSですね。。これが関係あるのでしょうか。。

akabee

2017/04/03 14:39

こちらで再現ができないので私からはなんとも言えませんが、私の言葉を信じていただけるのであれば、現状分かったのは発生には条件があるということです。回答に私の再現確認用のコードを記載しておきますので、条件の切り分けを実施するしかありませんね。OS依存ではなく、もしかするとコード起因かもしれませんし。

行動規範の内容に同意します

回答1件

ベストアンサー

修正依頼欄にてやり取りの件。
私が再現確認したコードを記載しておきます。なおAngularJSをフレームワークとして選択しています。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19  </script>
20</head>
21<body>
22        <ons-splitter>
23            <ons-splitter-side id="hoge" side="left" width="90%" collapse swipeable>
24                <ons-page>
25
26                </ons-page>
27            </ons-splitter-side>
28            <ons-splitter-content id="fuga" page="content.html"></ons-splitter-content>
29        </ons-splitter>
30        
31    <ons-template id="content.html">
32            <ons-page ng-controller="ContentCtrl as content">
33                  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>
34            </ons-page>
35    </ons-template>        
36</body>
37</html>
38

投稿2017/04/03 14:41

akabee

総合スコア1947

lion_

2017/04/03 14:51

上記ご提示ありがとうございます。新規プロジェクトを作成し、ご提示のhtmlにて確認しました。以下手順にて確認しましたがやはり再現しました。どうやらOS依存の事象のようですね。。＜手順＞１．画面起動２．splitter-sideをopen ３．side画面でswipe ４．splitter-sideをclose ５．文字bを確認