Images SVG floues dans chrome pour Android
pour échapper à l'enfer des différentes densités de pixels dans les téléphones mobiles, j'utilise SVG-files comme images de fond dans mon css.
google Chrome pour android semble rendre inline-svg, mais échoue si le svg
- est utilisé dans le css
background-imageet une url normale - est utilisé dans le css
background-imageet un uri de données - est utilisé avec un
imagel'élément
le navigateur de stock d'android 4 fonctionne très bien. (et tous les autres téléphones mobiles, j'ai essayé, trop)
Vous pouvez visiter ce violon et check it out. Zoomer pour voir la différence.
Quelqu'un sait pourquoi chrome utilise des bitmaps pré-rendus ici?
4 réponses
comme d'autres réponses l'ont souligné dans ce numéro et d'autres questions similaires, le rendu de SVG est problématique dans chrome et dans le navigateur Web android natif. C'est un problème connu de navigateur chrome / natif.
après avoir examiné de nombreuses solutions pendant un certain nombre de jours, je suis tombé sur ce contournement par hasard. L'astuce consiste à insérer du texte dans le fichier SVG, il peut s'agir d'un seul caractère transparent.
par exemple, ajoutez ceci (ou similaire) à votre SVG fichier.
<text transform="matrix(1 0 0 1 7.1079 13.5215)" opacity="0" font-family="'MyriadPro-Regular'" font-size="12">a</text>
sans examiner la source réelle de chrome ou les processus, Je ne peux que supposer qu'en intégrant du texte, il force le SVG à être rendu à une échelle supérieure pour les périphériques à dpi élevés.
Cette solution (sur les navigateurs que J'ai pu tester sur Android/Chrome) fonctionne peu importe comment l'élément image de fond est utilisé, rotations, position fixe, etc. Et semble même être clair sous zoom.
Profitez-en!
C'est un problème connu https://code.google.com/p/chromium/issues/detail?id=161982
lorsque SVG a été rendu sous forme d'image (ou d'image de fond) il a été rendu à l'origine à la densité de pixels CSS, ce qui le rend flou sur les appareils où 1 CSS px != 1 périphérique px, qui comprend la plupart des téléphones Android haut de gamme.
ce problème a été corrigé dans Chrome 25 (version actuelle au moment de l'écriture), cependant les images deviennent flou à nouveau que vous zoomez le viewport dans.
ce problème est corrigé dans Chrome 26 (actuellement Chrome bêta, disponible dans le Play store), les images SVG et les arrière-plans restent nets.
pour moi, la solution alors qu'il a fallu beaucoup de temps pour découvrir était mes éléments css:
border-radius: 4px;
C'fixe mes questions, mais je n'ai pas été en mesure de recréer plus que sur le site, j'ai travaillé sur mais ici, c'est le violon que j'ai essayé de reproduire le problème sur le mobile:
bonne chance, mon conseil Vérifiez s'il y a une classe qui pourrait affecter le dessin de l'élément.
Si vous insérez un fichier SVG, le fichier sera (selon l'hôte, Wikipedia, par exemple) pré-rendus. Ainsi donc, en charge, l'image sera rendue pour la taille donnée. Inline SVG (directement codé en page) va se redimensionner lorsque la page se redimensionne. Mais, je ne suis pas sûr des navigateurs mobiles car ils ne redimensionnent pas les éléments dans la page, ils "zoom"juste
donc en gros ce que vous faites c'est peindre un SVG sur une toile (jeu de mots!) puis zoom une toile. Inline a SVG... afin de mieux....