0

Criei um personagem utilizando SVG, que aparece desmontado no tablet dentro do webview, isso aconteceu no navegador padrão também do tablet:

Multilaser

  • Android 4.4.2
    • Número do modelo: ML02-M9-Quad-Core
    • Processador QuadCore-A33
    • Resolução: 1067 x 480

Tanto nos navegadores IE, Firefox, Safari, Opera, assim como em PCs, IOS, iPhone, celulares Android como A5, J5, J7, Asus Zenfone 2/3, XPeria, Moto G, o personagem ficou normal, já no webview apresentou problema só neste aparelho, em qualquer outro aparelho, não apresentaram problemas decorrentes do CSS, eu percebi que o navegador chrome depois de atualizá-lo ele parou de apresentar este comportamento. Eu gostaria de entender, porque isso acontece somente neste modelo de equipamento. Outro problema também ocorre com este mesmo aparelho, quando utilizamos carrossel com touch do tipo swipe. Alguém por favor, uma luz no fim do túnel, poderia me ajudar a encontrar um caminho para solucionar este problema. Ou mesmo uma forma de fazer um media queries para corrigir o posicionamento do personagem.

O personagem como deveria ficar e está nos demais aparelhos:

inserir a descrição da imagem aqui

Como está aparecendo no tablet:

inserir a descrição da imagem aqui

Obs: O código é muito extenso, então não dá pra colar aqui, mas posso descrever que todos os elementos do svgs estão com posicionamento absoluto, dentro de um container com posicionamento relativo, e estes svgs estão inseridos inline na tela, ou seja não é um caminho da imagem, observe que a barba é a única que se manteve no lugar, mesmo ela estando com os mesmos parâmetros de posicionamento que os demais.

2
  • Cara coloca ai seu SVG, CSS etc e se possível uns prints de como está o personagem na tela. Apenas pelo seu relato não da para simular o seu problema e bolar uma resposta... Mas faça um teste simples, mude a orientação do table de Vertical para horizontal e vice-verça para testar a responsividade em formatos diferentes de tela
    – hugocsl
    Commented 8/10/2018 às 13:49
  • Olá @hugocsl, segui suas recomendações, eu já havia feito este tipo de teste de responsividade, não muda muita coisa. Commented 8/10/2018 às 14:25

1 Resposta 1

1

Descobri o problema, é que navegadores antigos não aceitam CSS de width e height do elemento SVG. Daí tive que passar width e height como atributo diretamente no elemento, ou seja:

Assim não funcionava:

.element svg {
  width: 500px;
  height: 100px;
}

Tive que fazer isso para corrigir o problema:

<span class="element"><svg width="500px" height="100px" ...> ... </svg></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .