Bonjour à tous, je suis en train de tester un projet sur Internet Explorer et certains de mes éléments n'ont pas le comportement attendu:

- Mes svg qui sont situé dans des balises <use> ne sont pas affiché. En inspectant la console j'ai cette erreur qui est affichée: "La balise ne peut pas se fermer automatiquement. Utilisez une balise de fermeture explicite." Je précise que sur les autres browser le svg s'affiche parfaitement.

voici le code html:

<svg>
						
							
 <use xlink:href="/imagenta-dev/img/arrow_ico.svg#arrow-ico" />

</svg>

Et voici le code du svg:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="28px" height="19px" viewBox="-3 0 28 19" enable-background="new -3 0 28 19" xml:space="preserve">

<devs>
<g id="arrow-ico">
	<path fill="#ffffff" d="M2.683,8.135h-3.324C-1.392,8.135-2,8.743-2,9.494c0,0.75,0.608,1.359,1.359,1.359h3.324
		c0.75,0,1.359-0.609,1.359-1.359C4.043,8.743,3.434,8.135,2.683,8.135z"/>
	<path fill="#ffffff" d="M23.724,8.672l-4.891-6.437c-0.268-0.352-0.673-0.537-1.083-0.537c-0.285,0-0.575,0.09-0.821,0.277
		c-0.598,0.454-0.714,1.306-0.26,1.904l3.274,4.307c-0.088-0.016-0.17-0.052-0.262-0.052H7.271c-0.75,0-1.359,0.607-1.359,1.359
		c0,0.75,0.609,1.359,1.359,1.359h12.41c0.092,0,0.174-0.035,0.261-0.053l-3.274,4.308c-0.454,0.597-0.338,1.45,0.26,1.904
		c0.597,0.454,1.451,0.336,1.904-0.26l4.891-6.437C24.092,9.831,24.092,9.159,23.724,8.672z"/>
</g>

<g id="arrow-ico-red">
	<path fill="#ea1864" d="M2.683,8.135h-3.324C-1.392,8.135-2,8.743-2,9.494c0,0.75,0.608,1.359,1.359,1.359h3.324
		c0.75,0,1.359-0.609,1.359-1.359C4.043,8.743,3.434,8.135,2.683,8.135z"/>
	<path fill="#ea1864" d="M23.724,8.672l-4.891-6.437c-0.268-0.352-0.673-0.537-1.083-0.537c-0.285,0-0.575,0.09-0.821,0.277
		c-0.598,0.454-0.714,1.306-0.26,1.904l3.274,4.307c-0.088-0.016-0.17-0.052-0.262-0.052H7.271c-0.75,0-1.359,0.607-1.359,1.359
		c0,0.75,0.609,1.359,1.359,1.359h12.41c0.092,0,0.174-0.035,0.261-0.053l-3.274,4.308c-0.454,0.597-0.338,1.45,0.26,1.904
		c0.597,0.454,1.451,0.336,1.904-0.26l4.891-6.437C24.092,9.831,24.092,9.159,23.724,8.672z"/>
</g>
</devs>
</svg>

-J'ai une animation avec keyframes qui ne fonctionne pas. J'ai mis les préfixes mais rien à faire, ça ne marche pas :/ une idée pour résoudre ce problème? Voici le CSS:

.mouseScroll{
	width:12px;
	height:20px;
	margin: 0 auto;
	overflow:hidden;
	height:70px;
	position: absolute;
	left: calc(50% - 5px);
	bottom: 0px;
}

.mouseScroll_el{
	width:10px;
	height:10px;
	border-radius:10px;
	margin-bottom:20px;
	display: block;
	background: #00a0df;
	opacity:.5;
}

.mouseScroll_el--1{
	-o-animation: mouse_scroll1 2s infinite ease-out;
	-moz-animation: mouse_scroll1 2s infinite ease-out;
	-webkit-animation: mouse_scroll1 2s infinite ease-out;
  	-ms-animation: mouse_scroll1 2s infinite ease-out;
	animation:mouse_scroll1 2s infinite ease-out;
}

.mouseScroll_el--2{
	opacity: 1;
	-o-animation: mouse_scroll2 2s infinite ease-in;
	-moz-animation: mouse_scroll2 2s infinite ease-in;
	-webkit-animation: mouse_scroll2 2s infinite ease-in;
  	-ms-animation: mouse_scroll2 2s infinite ease-in;
	animation: mouse_scroll2 2s infinite ease-in;
}


@-webkit-keyframes mouse_scroll1 {

  0%  { -o-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
  		-ms-transform: translate(0, 0);
  		transform: translate(0, 0);
		  opacity:0;}

 90% { 	-o-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
  		-ms-transform: translate(0, 0);
 		transform: translate(0, 0);
		  opacity:0;}

  100% { 
  		-o-transform: translate(0, 31px);
		-moz-transform: translate(0, 31px);
		-webkit-transform:translate(0, 31px);
  		-ms-transform: translate(0, 31px);
  		transform: translate(0, 31px);
		  opacity:1;}
}

@-webkit-keyframes mouse_scroll2 {

  0%  { -o-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
  		-ms-transform: translate(0, 0);
  		transform: translate(0, 0);
		  opacity:1;}

 90% { 	-o-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
  		-ms-transform: translate(0, 0);
 		transform: translate(0, 0);
		  opacity:1;}

  100% { 
  		-o-transform: translate(0, 31px);
		-moz-transform: translate(0, 31px);
		-webkit-transform:translate(0, 31px);
  		-ms-transform: translate(0, 31px);
  		transform: translate(0, 31px);
		  opacity:0;}
}

Merci d'avance à ceux qui me liront :) 

Salut,

Quelle version d'IE ? Es-tu en local ou sur un serveur (même wamp ou équivalent) ?

Aussi, tu n'as pas besoin de préfixes pour les propriétés transform et animation.

Merci pour ta réponse ! Alors c'est sur IE 11, en local sur xampp. Pour les préfixes, je dois les mettre ou du coup? Je veux dire de façon systématique. 

Aucun de façon systématique. Le web évolue, il faut évoluer avec. https://www.emmanuelbeziat.com/blog/prefixes-css-jusqua-quand 

Pour ton problème de svg, donne-leur une taille (hauteur, largeur) pour voir s'ils apparaissent (à la balise svg, pas use).

Je teste et je te dis quoi, merci pour ton coup de main

EDIT: Alors mon svg avais déjà une largeur et une hauteur, donc cela ne règle pas le problème :/ Je vais remplacer les svg par des png pour IE, je pense que cela reste la meilleur solution

-
Edité par wagawaga09 12 novembre 2017 à 12:36:42

IE supporte le svg, ce serait dommage de coller une rustine plutôt que de trouver la source du problème. Tu as un lien pour voir ça en direct ? Sinon, tu peux reproduire ça sur jsfiddle ?

Alors j'ai testé une autre solution pour garder le SVG et cela fonctionne: j'ai directement mis le svg dans mon html, sans utiliser la balise 'use' . Le svg apparait bien comme il faut, mais du coup j'ai le code du svg dans mon ficher html ^^"

Okay, je viens de trouver: il manque le support des appels svg externes. En gros, il y a deux façons de faire : définir ta bibliothèque de svg dans un fichier externe, ou bien directement dans ta page. IE11 ne supporte que la seconde option.

Tu peux soit  le faire manuellement, soit utiliser un petit script (plus simple, car ça ne touche que les versions qui ne supportent pas l'appel externe): https://github.com/jonathantneal/svg4everybody

aaah super merci, je teste ça et je te dis quoi !

EDIT: Ca fonctionne nickel ! Merci beaucoup mec :) 

-
Edité par wagawaga09 13 novembre 2017 à 10:47:28