guppy.71site.fr - Forum - En vrac ! - Flip fait un flop avec IE et APPLE!

clos par JeanDenis le 15/03/2017 @ 05:25

Sujet n° 20

le 19/12/2016 @ 21:59
par anne_b64

Bonsoir
Je viens de tenter un flip ICI

Fière de moi, je vais tester ma nouvelle boîte sur tous les navigateurs de mon ordi:
- FFox - ok
- Chrome - ok
- Edge - ok

oups:
IE11 - patatras
il fait le flip, mais pas le salto arrière ..... l'image 2 ne s'affiche pas, on voit seulement l'image 1 à l'envers.

Iphone et iPad - patatras
ça tourne, ça montre l'image 2 et puis hop, disparue, on a l'image 1 à l'envers.

Y a-t-il qqchose à faire à part interdire IE?

Merci par avance.
Anne

PS: je vais laisser l'animation juste le temps d'un conseil, car en l'état, ce n'est pas satisfaisant.

Rectifié par anne_b64 le 20/12/2016 @ 09:31

Rectifié par anne_b64 le 20/12/2016 @ 09:32

Rectifié par anne_b64 le 20/12/2016 @ 09:33

Réponse n° 1
--------
le 20/12/2016 @ 07:03
par JeanDenis

Administrateur
41 messages

Bonjour Anne,

Je ne sais pas où sont tes tests car tu m'as laissé en lien, une adresse de ce site ...

Mais, de toutes façons, je ne pense pas hélas pouvoir être d'une grande utilité...

IE d'abord... je ne l'utilise plus depuis belle lurette, et même Microsoft l'a abandonné, c'est dire !
Je n'utilise pas non plus les ustensiles d'Apple et ne peux donc pas tester ses affichages.

Ce que je peux tout de même te conseiller, c'est d'ajouter dans le code les préfixes de compatibilité
-moz- -webkit- -o- -ms- devant les propriétés telles que perspective, transform, transition, opacity qui posent quelquefois souci (d'ailleurs, pour opacity, je crois qu'il y a encore quelques spécificités à IE) ...

tu auras ainsi, par exemple :

#f1_container:hover #f1_card {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaaaaa;
}

Essaie cela, si cela ne convient pas, il te faudra te passer de ce petit, et non-indispensable agrément... (entre-nous d'ailleurs, l'intérêt de l'effet de survol pour les smartphones et tablettes est tout à fait relatif...)

Amicalement,

Réponse n° 2
--------
le 20/12/2016 @ 09:40
par anne_b64

Bonjour
Voilà, j'ai corrigé le lien.
Je n'ai pas utilisé hover, mais ceci:

Code : css

<style type="text/css">#f1_container {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 133px;
  z-index: 1;
  background: transparent;
  border:1px solid #cccccc;
  border-radius:0px;
}
#f1_container {
  perspective: 500px;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  border-radius: 0px;
  box-shadow: -2px 2px 2px #aaaaaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: -5px;
  color: #ffffff;
  text-align: center;
  background-color: transparent;opacity:0.9;
  border-radius:30px;
}
</style>

Et bon, je vais laisser comme ça, tant pis pour les IE et APPLE.

Bonne journée.
Anne

Réponse n° 3
--------
le 20/12/2016 @ 09:53
par JeanDenis

Administrateur
42 messages

Re,

Bon... Tu as quand même un peu utilisé hover sinon cela ne fonctionnerait pas

...

Citation : Anne

#f1_container:hover

Sinon, pour Apple, tu peux quand même essayer de placer le préfixe (tel que je l'ai indiqué -à différents endroits-)
-webkit-
qui est dédié, entre autres, à Safari.
Cela ne risque rien, et te permettra de savoir si c'est -ou non- efficace...

Amicalement,

Réponse n° 4
--------
le 20/12/2016 @ 11:33
par anne_b64

Re!
Merci JeanDenis, j'ai tenté tes solutions, mais APPLE résiste. Quant à IE, n'en parlons même pas

.
J'ai opté pour un basique gif animé beaucoup plus transversal en terme de compatibilité et qui ira bien pour les quelques jours de vie qui lui sont alloués.

Bonne journée.
Anne