画面向き変更時にons-splitter-sideの内容が消える

記事の対象者

• OnsenUI 2 Beta でons-splitter-sideを使っている人

問題

ons-splitter-sideはcollapse="portrait" を設定すると、

↓端末の向きが縦の時

↓端末の向きが横の時

こんな感じでサイド画面を自動で隠してくれる。

サイド画面を表示させた状態で、端末の向きを縦から横に変更するとサイド画面が真っ白になる。
（正確にはsplitter-contentの裏に隠れる）

解決法1

HTMLはこれ。

<ons-splitter var="splitter">
    <ons-splitter-side var="side" page="menu.html" collapse="portrait" swipeable width="200px" swipe-target-width="50px"></ons-splitter-side>
    <ons-splitter-content var="content" page="page.html"></ons-splitter-content>
</ons-splitter>

ons.orientation.onで画面向きの変更イベントを検知させ、event.isPortraitがfalseだったらサイド画面を閉じる。

// 読み込み時
ons.ready(function() {
    $timeout(function() {
        vm.side = $window.side;
    });
});

// スプリッタ画面向き変更バグ対策
ons.orientation.on("change", function(event) {
    if (!event.isPortrait) {
        vm.side.close();
    }
});

解決法2

window.addEventListenerでイベントを拾う。
Beta.9以降はこれで解決する。

// 読み込み時
ons.ready(function() {
    $timeout(function() {
        vm.side = $window.side;
        
        // スプリッタ画面向き変更バグ対策
        window.addEventListener('orientationchange', function(){
            if (vm.side.isOpen) { // Beta.9はvm.side.isOpen()
                vm.side.close();
            }
        }, false);
    });
});

解決法3

IssuesにはCSSを追加する方法が紹介されている。
https://github.com/OnsenUI/OnsenUI/issues/1392

[mode="split"] ~ ons-splitter-mask {display:none !important}
[mode="split"] {transform: none !important; transition:none !important}

次の更新で修正されると思われる（RC.7の時点ではまだ）。

結論

ons.orientation.onでchangeイベントを拾うか、addEventListenerを使えばバグの回避は可能。
既に修正されているかもしれないが。