Cannot click area after CSS 3D transforms (chrome)

Question

I have a problem of link accessibility after 3D rotating, only happening in Chrome.

When I click a Menu link, the header/nav is rotated, and it opens a "submenu panel". But after applying this CSS3 transformation, I cannot click on the content inside the submenu panel, the whole area is not accessible.

I have edited a new Fiddle, with less code : https://jsfiddle.net/helloducoux/11rnh4ry/2/

Here is 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-->

Here's my JS for targeting the correct panel-sumenu, and adding class on the Header flipped :

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');
  })
})

And the 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;
}

I've tryed many modifications cause I saw similar posts/problems (eg this one), but nothing works.

Maybe someone can see the reason ?

Thanks in advance for your help ! :)