Partage

Problème avec IE

Keyframes & use pour svg

11 novembre 2017 à 17:07:38

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 :) 



11 novembre 2017 à 18:57:25

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.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
11 novembre 2017 à 22:49:58

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. 

12 novembre 2017 à 3:00:39

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).

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
12 novembre 2017 à 12:24:59

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

12 novembre 2017 à 16:16:41

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 ?
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
12 novembre 2017 à 17:41:40

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 ^^"
13 novembre 2017 à 9:48:20

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

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
13 novembre 2017 à 10:27:15

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

Problème avec IE

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown