CSS 3D变换后无法点击区域（chrome）

Question

我在3D旋转后遇到链接可访问性问题，只发生在Chrome中。

单击“菜单”链接时，标题/导航将旋转，并打开“子菜单面板”。 但是在应用这个CSS3转换后，我无法点击子菜单面板内的内容，整个区域都无法访问。

我编辑了一个新的小提琴，代码较少：https://jsfiddle.net/helloducoux/11rnh4ry/2/

这是html：

<div id="page">

  <header id="header-desktop" class="has-transition">

    <div class="header-nav has-transition">
      <a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-1">Panel #1</a>
      <a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-2">Panel #2</a>
    </div><!--/header-nav-->

<div class="header-panel has-transition">

  <div id="header-panel-1" class="header-panel-submenu  has-transition">
    <p class="header-panel-title">Panel #1</p>
    <span class="header-panel-close js-flip-header-back">X</span>
        <div class="header-panel-body">
            <p>I am the content of Panel #1<br />Text <a href="#">and links</a> are not accessible under Chrome only !</p>
        </div>
    </div><!--/header-panel-1-->

    <div id="header-panel-2" class="header-panel-submenu  has-transition">
    <p class="header-panel-title">Panel #1</p>
    <span class="header-panel-close js-flip-header-back">X</span>
        <div class="header-panel-body">
            <p>Here again, in the content of Panel #2<br /> I cannot acess Text <a href="#">and links</a>...</p>
        </div>
    </div><!--/header-panel-2-->

</div><!--/header-panel-->
</header><!--/header-desktop-->

<div style="padding:10px;font-size:34px;">
  <p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div><!--/content-->

这是我的JS用于定位正确的面板 - sumenu，并在Header上添加类翻转：

jQuery(document).ready(function($) {
    $(".js-flip-header").click(function() {
        $("#header-desktop").toggleClass("is-flipped");
    });
    $(".js-flip-header-back").click(function() {
        $(this).closest('.header-panel-submenu').removeClass("is-open")
        $("#header-desktop").removeClass("is-flipped");
    });
});
$(document).ready(function(){
  $('.js-target-submenu').click(function(){
  var tab_id = $(this).attr('data-tab');
  $('.js-target-submenu').removeClass('is-open');
  $('.header-panel-submenu').removeClass('is-open');
  $(this).addClass('is-open');
  $("#"+tab_id).addClass('is-open');
  })
})

CSS：

* {padding:0; margin:0;} *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#page { 
  padding-top: 120px; 
  margin: 0 auto; 
  position: relative;
 }

.has-transition {
  -webkit-transition: all .4s 0s;
  -moz-transition: all .4s 0s; 
  -ms-transition: all .4s 0s; 
  -o-transition: all .4s 0s; 
  transition: all .4s 0s;
}

#header-desktop { 
  position: relative; 
  z-index: 999;
  height: 120px;
  width:100%; 
  position: fixed;
  left: 0; 
  right: 0; 
  top: 0;
  transform-style: preserve-3d; 
  -webkit-transform-style: preserve-3d; 
  transition:transform .4s linear; 
  -webkit-transition:transform .4s linear;
}
#header-desktop.is-flipped {
  transform:rotateX(90deg);
  -webkit-transform:rotateX(90deg);
}

  .header-nav{
  width:100%; 
  height:120px;
  position: relative;
  background: yellow; 
  transform:translateZ(60px); 
  -webkit-transform:translateZ(60px);
  border-bottom: 1px solid #e7e7e7;
}
#header-desktop.is-flipped .header-nav{
  background-color:orange;
}

.header-panel{
  width:100%; 
  height:120px;
  position: relative;
  background-color:lime; 
  transform:rotateX(-90deg) translateZ(-60px); 
  -webkit-transform:rotateX(-90deg) translateZ(-60px);
}
.header-panel-submenu {
  width: 100%; 
  overflow: hidden;
  height: 0;
}
.header-panel-submenu.is-open {
  height: 100%;
}

.header-panel-title {
  margin: 0;
  line-height: 120px;
}
.header-panel-close {
  position: absolute;
  right: 36px; 
  top: 48px; 
  cursor: pointer;
}
.header-panel-body {
  background-color: pink; 
  position: absolute; 
  top: 120px; 
  left: 0; 
  right: 0;
  padding:30px 10px;
}

我尝试了很多修改，因为我看到了类似的帖子/问题（例如this one），但没有任何效果。

也许有人能看出原因？

提前感谢您的帮助！ ：）