Clic impossible après CSS 3D transforms (chrome)

Bonjour à tous,

Je rencontre un souci d'accessibilité de mes éléments après une rotation 3D, et ce seulement dans Chrome.

Le principe :
Je clic sur un lien qui déclenche la rotation du header/nav.
Cela ouvre un "sous-panel" avec du contenu.

Le problème :
Ce sous-panel est visible mais inaccessible/incliquable sous Chrome.

J'ai mis à jour mon Fiddle ici : https://jsfiddle.net/helloducoux/11rnh4ry/2/

Côté 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-->
</div><!--/page-->

Voici mon JS pour cibler un sous-panel au clic, et ajouter les classes du 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');
  })
})

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

J'ai trouvé des posts avec problèmes similaires sur le net, et j'ai essayé d'autres pistes sans succès.

Peut-être que mon sauveur passera par là ?

Merci d'avance pour votre aide !
Modifié par imudo24 (28 Oct 2016 - 09:02)

Bonjour à tous,

N'ayant pas eu de retour, est ce que mon code n'est pas assez clair ?
Trop long ? Faut-il que j'écourte un peu pour le rendre plus lisible ?

Bonjour Yordi,

Merci beaucoup de ton retour.

Je comprends la logique, et l'ensemble semble beaucoup plus propre et efficace.
Nickel pour l'unique Close aussi.

Je vais adapter le mouvement d'apparition du panel, c'est parfait.

Merci encore de ton aide précieuse