Safari/IE pb avec rotate et transform
Bonjour,
Depuis hier, j'apprend l'accordéon, c'est un instrument très amusant.
Par exemple, dans la partie droite de chaque menu je cherche à faire alterner deux icones bootstrap avec un effet d'animation,
l'exemple ci-dessous fonctionne très bien sur Chrome/FF/Opéra mais pas sur IE/Safari.
Petite précision, j'utilise exactement le même principe dans un autre contexte sur des images et cela fonctionne,
comme si le content: n'était pas reconnu...
Tournant en rond, auriez-vous une idée du problème ?
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| .accordion-icon [data-toggle="collapse"]:after
{
font-family: 'Glyphicons Halflings';
content: "\2212"; /* "-" icon */
float: right;
color: #b0c5d8;
font-size: 16px;
line-height: 28px;
/* Animation */
transition: all 700ms ease;
-webkit-transition: all 700ms ease; /* Compatibilité : Safari */
}
.accordion-icon [data-toggle="collapse"].collapsed:after
{
font-family: 'Glyphicons Halflings';
content: "\2b"; /* "+" icon */
float: right;
color: #fff;
font-size: 16px;
line-height: 30px;
/* Animation */
transition: all 700ms ease;
-webkit-transition: all 700ms ease; /* Compatibilité : Safari */
/* Rotation */
transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* Compatibilité : Safari */
} |
Vous remerciant par avant pour vos idées.
