Bonjour,

j'ai une page sur laquelle sont présentées différentes actions, comme des cartes, avec un résumé au verso qui se dévoile au survol, par une div qui se transforme par rotateX. C'est à cette adresse : http://www.lacompagniedanslarbre.fr/actions-culturelles

Mais quand je mets un lien dans la div qui est au verso, sous certains navigateurs, il est impossible de cliquer, le lien est affiché avec les css des liens, mais n'est pas cliquable.

Quelqu'un a une idée de ce qui peut être incompatible ? C'est le même topo pour un évenement java onclick, ou un bouton...

Merci d'avance,

K.

Bonjour SimonDusart,

Tu peux donner des noms de navigateurs où cela ne fonctionne pas

AliasDmc, sur pc ça fonctionne avec firefox et explorer, mais pas avec google, sur mac ça ne fonctionne pas sous Safari, et sur téléphone, ça ne marche pas.

Bonjour SimonDusart,

Essayes de mettre dans  la css http://www.lacompagniedanslarbre.fr/templates/neo/css/neo.css

de ne pas assigner  à .flip les propriétés de backface-visibility : hidden;

Code concerné :

.flip,
.flip > div{
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

Cela semble fonctionner dans mon test

https://codepen.io/Zonecss/pen/PrejOp

Merci beaucoup, ça règle effectivement le problème pour chrome, mais du coup, sur mac, c'est l'image recto qui reste à l'envers, ma div verso avec le texte ne s'affiche carrément pas. Sur téléphone (chrome) ça reste un lien inactif...

Pourtant le tuto que j'ai suivi fonctionne très bien sur mac, je ne comprends pas ce que je rate : www.css3create.com/Flip-card-avec-les-transformations-3D-CSS

-
Edité par SimonDusart 3 juillet 2019 à 18:42:41

Bonjour SimonDusart,

J'ai pas de mac je ne peux pas tester mais sur chrome mobile tout (codepen et site)

Est-ce que le codepen fonctionne correctement sous mac (safari?)?

Bonjour AliasDmc,

Aucune différence sur codepen ou sur le site. Si je n'attribue pas backface-visibility:hidden à .flip, l'image recto se retourne bien, mais reste (alors qu'elle devrait laisser la place au paragraphe qui est à l'arrière).

Si je l'attribue, tout est ok, mais les liens ne sont pas cliquables ni sous chrome ni sous safari. 

Bonjour SimonDusart,

Etrange, sur version de chrome "Version 75.0.3770.100" pc j'ai aucun des problèmes que tu décris .

https://codepen.io/Zonecss/pen/PrejOp

Qu'elle est ta version de chrome?

C'est un chrome MAC ?

J'ai fait une petite modification du codepen tu peux le retester (pour le pb des lien)

https://stackoverflow.com/questions/10886656/webkit-transform-blocking-link

-
Edité par AliasDmc 11 juillet 2019 à 18:51:01

Bonjour AliasDmc

J'espère que tu vas bien. Je déterre ce sujet et cette discussion que nous avons eue l'été dernier car le rythme de mon boulot ne m'a pas vraiment permis de m'y repencher jusqu'à aujourd'hui.

Je dois régler ce problème d'affichage impérativement (et vu que tu es le seul à m'avoir répondu :op ). Dans un premier temps, mon souhait c'est vraiment que la face A disparaisse au survol pour laisser la face B s'afficher, et définitivement, je galère. Donc si tu as qq minutes pour y rejeter un oeil et me dire ce que tu en penses...

Au plaisir de te lire

K.