28106 sujets

CSS et mise en forme, CSS3

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à ? Smiley smile

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 ?
Je viens d'éditer mon post initial + son Fiddle car je pense que le code était trop chargé.
J'ai épuré afin d'améliorer la lisibilité.

Si cela peut aider ? Car là j'avoue que là je sèche complètement..
Modérateur
Hello,

En voyant ton code, je me pose une question : Et si tu prends le problème à l'envers ?
En fait, par défaut je n'appliquerais pas de transform sur tes éléments en position déplié (ou avec des valeurs à 0 pour pouvoir faire les transitions). Et du coup à la place d'avoir ta class .is-open tu aurais une class .is-close pour masquer à l'aide de ton transform.
Modérateur
Hello,
Voilà un exemple fait en vitesse. À toi de l'adapter pour ton cas mais ça montre bien que les éléments sont de base en absolute avec une transformation, et on annule simplement la transformation pour les afficher.

Pour le close, j'en ai fait un seul ce qui rend ton code plus propre et plus facile pour les adaptations futures.

Est-ce que ça te parait plus clair ?

ps : pour cette ligne $("#"+tab_id).removeClass('is-close');, je préfère insérer le # directement dans le href du lien pour assurer ton fallback. Donc si tu n'as pas de styles, cela se transformera en ancre simple.
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 Smiley smile