web-dev-qa-db-fra.com

Hauteur SVG calculée de manière incorrecte dans les navigateurs Webkit

J'ai un problème spécifique aux navigateurs Webkit (Safari & Chrome, sur Mac et PC).

J'utilise Raphael JS pour restituer les données SVG et j'utilise une mise en page responsive pour mettre à l'échelle les SVG avec la fenêtre du navigateur. Les fichiers SVG sont réglés sur 100% largeur/hauteur à l'aide de JQuery. Les largeurs des éléments contenant les éléments sont définies en pourcentage afin de conserver les rapports de la mise en page au fur et à mesure que la page se redimensionne.

Trouble is Webkit ne calcule pas correctement la hauteur, il ajoute des pixels supplémentaires (parfois des centaines) autour de l'image SVG. qui casse la mise en page.

Si vous ouvrez le lien suivant dans un navigateur Webkit, vous verrez les zones de pixels supplémentaires en vert. Si vous utilisez le développeur inpspector dans safari, la taille indiquée pour le fichier SVG est supérieure à celle affichée.

http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html

Si vous ouvrez le lien dans Firefox ou Opera, vous verrez la disposition telle qu'elle devrait fonctionner (le vert ici est causé par les marges que j'ai volontairement définies).

IE8 avait un problème similaire qui utilisait height: auto fixed, mais cela ne fonctionnerait pas dans Webkit.

Quelqu'un d'autre a ce problème? Quelqu'un a une solution?

Je pense qu’il s’agit peut-être d’un bogue Webkit (le problème persiste déjà lorsque la construction nocturne est vérifiée), mais avant de le consigner, j’ai pensé à vérifier que personne d’autre n’a une solution en premier.

csswebkitsvg
30
Barry
svg { max-height: 100%; }

Bogue WebKit documenté ici: https://bugs.webkit.org/show_bug.cgi?id=82489

J'ai également ajouté la solution de contournement au gestionnaire de bogues.

66
zachleat

J'ai eu un problème similaire pour Safari. Le cas était que la largeur et la hauteur de svg étaient rendues sous forme d'attributs d'élément dom (dans mon cas, width = "588.75px" height = "130px"). La définition de la largeur et de la hauteur dans css n’a pas pu remplacer ce paramètre de dimension.

Pour résoudre ce problème pour Safari, j'ai supprimé les informations de largeur et de hauteur du fichier SVG tout en maintenant viewBox intact (vous pouvez modifier les fichiers .svg avec n'importe quel éditeur de texte).

Git diff extrait de mon .svg fichier:

    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 588.75 130"
-   height="130"
-   width="588.75"
    xml:space="preserve"
    version="1.1"
3
Sebastiaan Ordelman

J'ai trouvé que l'ajout de "position: absolute;" à l'élément image (si c'est dans un parent qui est également positionné de manière absolue), qui a appelé mon .svg, fait la "hauteur: 100%;" déclaration devient relative à son conteneur au lieu de la page/navigateur/périphérique. 

Ceci a été testé sur Chrome et Safari (mobile webkit) pour iOS 7.1, et cela a résolu mon problème (le fichier .svg était en dehors de son conteneur).

Espérons que ce soit un correctif quelque peu fiable pour ceux qui ont des problèmes. Vaut le coup?

0
Zanem

Je viens de régler la hauteur à une très grande taille dans le svg pour maintenir le rapport d'aspect. Utiliser 100% pose trop de problèmes. Cela fonctionne mieux pour moi car je ne voulais pas utiliser js.

Accessoires complets à: http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/

width = "1200" height = "235.5"

0
user2533951

je sais comment y remédier, il vous suffit de mettre ceci au début de votre fichier svg: "preserveAspectRatio =" xMinYMin none ", il doit être dans la balise svg comme ceci: 

Le problème sera résolu

0
timoun

Il s'agit d'un problème connu qui a été résolu par l'équipe Chromium avec la version 15.0.874.121. J'ai vérifié ce correctif moi-même juste aujourd'hui. 

http://code.google.com/p/chromium/issues/detail?id=98951#c27

0
TimDog

J'avais un problème avec le fait que Javascript renvoyait des valeurs de "hauteur" incorrectes pour les SVG, et j'ai trouvé que la solution consistait simplement à exécuter mon script (le bit nécessaire pour accéder à la hauteur) sur window.load plutôt que document.ready.

document.ready se déclenche lorsque le DOM est prêt, mais les images ne sont pas nécessairement restituées à ce stade. Au moment où window.load est déclenché, les images ont été chargées (le navigateur peut donc accéder correctement à leurs dimensions).

0
Nick F

Comme indiqué précédemment, WebKit a récemment amélioré la mise à l'échelle de SVG. Il est encore assez cassé dans le Safari actuel (version 5.1, WebKit 534), à mon avis. J'ai fait quelques expériences et enregistré mes découvertes sur mon site Web: http://www.vlado-do.de/svg_test/ En bref: incorporer svg avec <object> fonctionne dans la plupart des conditions dans WebKit 535. Pour les anciens WebKit, je l’intègre dans une balise <img>. C'est bien si vous ne voulez pas de liens dans votre svg (mais cela ne fonctionne pas dans les anciens Gecko et, étrangement, pose également problème dans le Chrome actuel).

0
Vlado

Il m'est difficile de comprendre exactement ce que vous voulez avec votre exemple ou ce qui ne vous convient pas. Toutefois, en règle générale, si vous utilisez une présentation avec des conteneurs de largeurs et de hauteur en pourcentage et que vous souhaitez que le contenu remplisse ces conteneurs, vous devez les sortir du flux (en utilisant position:absolute sur le contenu et position:relative ou position:absolute sur les conteneurs).

Voici un exemple simple qui fonctionne dans Chrome et Safari:
http://phrogz.net/SVG/size-to-fill.xhtml

Le #foo div a sa hauteur et sa largeur exprimées en pourcentage du corps. Il a un arrière-plan rouge qui ne sera jamais vu, car le fichier SVG contient position:absolute à l'intérieur, il est configuré pour le remplir complètement et possède un arrière-plan vert. Si vous voyez un jour en rouge, c'est une erreur.

#foo, svg { position:absolute }
#foo { left:20%; width:30%; top:5%; height:80%; background:red; }
svg  { top:0; left:0; width:100%; height:100%;  background:green; }

<div id="foo"><svg ...></svg></div>
0
Phrogz