CSS转换过渡不适用于Android浏览器

Question

我正在开发一个小网站：

http://richacinas.github.io

当我从Android浏览器中打开它并点击汉堡包菜单时，它不会为带有所有选项的UL元素设置动画。

它适用于任何其他浏览器/设备/屏幕尺寸，但它不会在Android浏览器上运行。

我使用的是translateX。我检查了几乎任何浏览器都支持它。该UL的位置是：固定的。

有人可以帮忙吗？这是一些代码：

<input id="cab_especial_button" type="checkbox" name="cab_especial_button">

<ul class="nav principal">
          <li class="l1">
            <a href="...">text
            </a>
          </li>
          <li class="l2">
              <a href="...">text</a>
          </li>
</ul>

<style>
#cab_especial_button:checked ~ .nav.principal{
    -webkit-transition:-webkit-transform 700ms ease;
            transition:transform 700ms ease;
    -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
            transform: translateX(0%);
}
.nav.principal{
    position:fixed;
    top:0;
    right:0;
    /*right:-100%;*/
    width: 40%;
    background: rgba(0,0,0,.8);
    padding:1em;
    overflow:auto;
    z-index: 20;
    height: 100%;
    -webkit-transition:-webkit-transform 700ms ease;
            transition:transform 700ms ease;
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
}
</style>