Skip to main content
adicionou 60 caracteres ao conteúdo
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94

O que pode estar afetando minha experiência nisso? Tive que mudar algumas imagens para png, mas não sei dizer se foi a melhor forma, a experiência que eu tenho no layout em desktop é muito melhor com ícones em SVG. Por que no celular pelo navegador chrome eu tenho problemas com a renderização dos ícones, tem alguma maneira, atributo, tag ou artifício de fazer com que backgrounds reconheça esta imagem e carregue sempre?

Exemplo do CSS:

.modal-detalhes .modal-detalhes-block .resume i.association-icon {
    background: url(../img/associantion_icon.svg) center center no-repeat;
    background-size: contain;
}

Testado em mobiles como Android 9.0 Pie, iOS 9, 10 e 10 Max. E no chrome em desktop no MacbookAir com MacOS Catalina 10.15.1

O que pode estar afetando minha experiência nisso? Tive que mudar algumas imagens para png, mas não sei dizer se foi a melhor forma, a experiência que eu tenho no layout em desktop é muito melhor com ícones em SVG. Por que no celular pelo navegador chrome eu tenho problemas com a renderização dos ícones, tem alguma maneira, atributo, tag ou artifício de fazer com que backgrounds reconheça esta imagem e carregue sempre?

Exemplo do CSS:

.modal-detalhes .modal-detalhes-block .resume i.association-icon {
    background: url(../img/associantion_icon.svg) center center no-repeat;
    background-size: contain;
}

O que pode estar afetando minha experiência nisso? Tive que mudar algumas imagens para png, mas não sei dizer se foi a melhor forma, a experiência que eu tenho no layout em desktop é muito melhor com ícones em SVG. Por que no celular pelo navegador chrome eu tenho problemas com a renderização dos ícones, tem alguma maneira, atributo, tag ou artifício de fazer com que backgrounds reconheça esta imagem e carregue sempre?

Exemplo do CSS:

.modal-detalhes .modal-detalhes-block .resume i.association-icon {
    background: url(../img/associantion_icon.svg) center center no-repeat;
    background-size: contain;
}

Testado em mobiles como Android 9.0 Pie, iOS 9, 10 e 10 Max. E no chrome em desktop no MacbookAir com MacOS Catalina 10.15.1

Pergunta fechada como "Precisa de detalhes ou esclarecimentos" por Syzoth, Largato
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94

Menu com ícones de imagens em svg as vezes não carrega na versão mobile

O que pode estar afetando minha experiência nisso? Tive que mudar algumas imagens para png, mas não sei dizer se foi a melhor forma, a experiência que eu tenho no layout em desktop é muito melhor com ícones em SVG. Por que no celular pelo navegador chrome eu tenho problemas com a renderização dos ícones, tem alguma maneira, atributo, tag ou artifício de fazer com que backgrounds reconheça esta imagem e carregue sempre?

Exemplo do CSS:

.modal-detalhes .modal-detalhes-block .resume i.association-icon {
    background: url(../img/associantion_icon.svg) center center no-repeat;
    background-size: contain;
}