Forum - En vrac ! - Flip fait un flop avec IE et APPLE!
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
--------
le 20/12/2016 @ 07:03
par JeanDenis
Administrateur
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,
--------
le 20/12/2016 @ 09:40
par anne_b64
Bonjour
Voilà, j'ai corrigé le lien.
Je n'ai pas utilisé hover, mais ceci:
<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>
Bonne journée.
Anne
--------
le 20/12/2016 @ 09:53
par JeanDenis
Administrateur
Re,
Bon... Tu as quand même un peu utilisé hover sinon cela ne fonctionnerait pas...
#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,
--------
le 20/12/2016 @ 11:33
par anne_b64
Rectifier message Clôturer sujet Remonter