Multilaser tablet does not load svg positioning correctly

Asked

Viewed 64 times

0

I created a character using SVG, which appears unmounted on the tablet inside the webview, this happened in the standard browser also tablet:

Multilaser

  • Android 4.4.2
    • Model Number: ML02-M9-Quad-Core
    • Quadcore-A33 processor
    • Resolution: 1067 x 480

Both in the browsers IE, Firefox, Safari, Opera, as well as in Pcs, IOS, iPhone, Android phones as A5, J5, J7, Asus Zenfone 2/3, Xperia, Moto G, the character became normal, already in the webview presented problem only in this device, in any other device, did not present problems arising from CSS, I realized that the Chrome browser after updating it it stopped presenting this behavior. I would like to understand, because it happens only in this model of equipment. Another problem also occurs with this same device, when we use carousel with touch type Swipe. Someone please, a light at the end of the tunnel, could help me find a way to solve this problem. Or even a way to make a media queries to correct the positioning of the character.

The character as it should be and is in the other appliances:

inserir a descrição da imagem aqui

How is appearing on the tablet:

inserir a descrição da imagem aqui

Obs: The code is very extensive, so you can’t paste here, but I can describe that all the elements of the svgs are in absolute positioning, inside a container with relative positioning, and these svgs are inserted inline on the screen, that is, it’s not an image path, note that the beard is the only one that has remained in place, even though it has the same positioning parameters as the others.

android css mobile svg

  • Cara puts his SVG, CSS etc and if possible prints of how the character is on the screen. Only by your report does not to simulate your problem and come up with an answer... But do a simple test, change the table orientation from Vertical to Horizontal and vice versa to test responsiveness in different screen formats

  • Hello @hugocsl, I followed your recommendations, I had already done this kind of responsiveness test, it doesn’t change much.

1 answer

1


I discovered the problem, is that older browsers do not accept CSS of width and height of the SVG element. Hence I had to pass width and height as attribute directly in the element, ie:

That’s not how it worked:

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

I had to do it to fix the problem:

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

Browser other questions tagged android css mobile svg

You are not signed in. Login or sign up in order to post.