[Résolu] Backface-visibility:hidden // impossible de cliquer les liens

Bonjour,


Je cherche à réaliser une série de flip-cards (inspirées de ce tuto : http://www.css3create.com/Flip-card-avec-les-transformations-3D-CSS) qui, au survol, révèlent un début de paragraphe avec un lien qui mène sur une page plus complète.

Il semblerait que le recours à Backface-visibility : hidden empêche SOUS CHROME ET SAFARI UNIQUEMENT de cliquer sur les liens, comme si la face cachée était restée au dessus.

J'ai essayé plusieurs choses :
-jouer avec des z-index
- remplacer hidden par none, ça permet de cliquer, mais là c'est firefox qui ne marche plus,
- proposer de passer la taille de la div cachée à 1px ou display au survol, pareil, ça libère mes liens, mais firefox n'interprète plus le backface-visibility,
- n'attribuer cette ligne qu'à une partie du code (.flap > span au lieu de .flap, .flap >span) et là c'est safari et les macs qui n'y arrivent pas.

Bref, après pas mal de temps et de tentatives, je m'en remets aux plus experts :o)

Mon besoin c'est de pouvoir avoir ces flip-cards, assurer l'animation qui les retourne sous la plupart des navigateurs, et pouvoir renvoyer vers d'autres pages par lien ou boutons.

la page concernée est ici : www.lacompagniedanslarbre.fr/actions-culturelles (les liens ne sont pas présent derrière chaque carte)

vraiment un grand merci pour vos retours et idées.

Simon
Modifié par SimD (01 Apr 2020 - 18:07)

Bonjour,

Merci pour vos réponses !

@Jean-Pierre-Bruneau je crois que c'est un problème côté OVH. ça fait ça depuis quelques jours, ça dure quelques minutes, puis le site est à nouveau accessible, sans aucune intervention de ma part. De toute façon, Beez n'est pas le template que j'utilise. C'est un mystère pour moi...

@Yordi, merci, je vais jeter un oeil à tout ça. J'avais déjà tenté de retirer le backface-visibility à cette div, mais ça buguait sous chrome avec les macs. Je vais potasser tout ça. Merci !

En effet en retirant backface-visibility des classes .flip et .flip>div le lien est de nouveau opérationnel. Et en plus l'animation est plus souple.
Dans ce cas, et dans la mesure où les deux faces sont opaques (image et couleur de fond), je pense qu'il n'est pas nécessaire d'utiliser backface-visibility.

Merci Alainpre pour ton retour également.

En effet, votre proposition à tous deux fonctionne, et le problème d'affichage sous Safari est résolu : il venait du fait que le css qui affiche la face avant était liée au div flip et non au div avant (il restait donc visible à l'envers). Merci, c'est réglé !
Modifié par SimD (02 Apr 2020 - 12:56)