Androidでtransitionが効きません。

Question

Android（4.2）でtransitionが効かず困っています。
クリックでメニューをふわっと出したいのですが、なぜかAndroidだけメニューが出てきません。
transitionを外すとメニューが出るようになるのですが動きがなくなります。
なんとか動き付きでメニューを出す方法を教えていただけないでしょうか？
よろしくおねがいします。

[ HTML ]

				<div class="menu-btn" id="js__btn">
					<span data-txt-menu="MENU" data-txt-close="CLOSE"><img src="img/nav/nav_btn_sp.png" alt="MENU"></span>
				</div>
				<nav class="menu" id="js__nav">
					ここにメニューが入っています。
				</nav>

[ CSS ]

	.menu {
		position: fixed;
		display: table;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(246,242,237,.9);
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: hidden;
		opacity: 0;
		z-index: 9999;
	}
	.open .menu {
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: visible;
		opacity: 1;
	}

[ JS ]

$(function () {
    var $body = $('body');
    //開閉用ボタンをクリックでクラスの切替え
    $('#js__btn').on('click', function () {
        $body.toggleClass('open');
    });
    //メニュー名以外の部分をクリックで閉じる
    $('#js__nav').on('click', function () {
        $body.removeClass('open');
    });
});