Header rotate

HTML

<div id="page">

  <header id="header-desktop">

    <div class="header-nav">
      <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">
		
      <div id="header-panel-1" class="header-panel-submenu">
        <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">
        <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>When I click a Menu link, the header/nav is rotated, and it opens a "submenu panel". But after applying this CSS3 transformation => Only in Chrome => I cannot click on the content inside the submenu panel, the whole area is not accessible.</p>
</div><!--/content-->
</div><!--/page-->

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

#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;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.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;
}

.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;
}

JavaScript

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