Multilayer Tablet Does Not Load Svg Positioning Correctly

Navigation
0

I created a character using SVG, which appears disassembled on the tablet within the webview, this happened in the tablet's default browser as well:

  

Multilaser

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

In IE, Firefox, Safari, Opera, as well as in PCs, IOS, iPhone, Android phones like A5, J5, J7, Asus Zenfone 2/3, XPeria, Moto G, the character was normal, no longer webview presented problem only in this device, in any other device, did not present problems arising from the CSS, I realized that the browser chrome after updating it stopped showing this behavior. I would like to understand, because this happens only in this equipment model. Another problem also occurs with this same device, when we use carousel with touch of swipe type. 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 do a media queries to correct the positioning of the character.

The character as it should be and is in other devices:

Howit'sshowinguponthetablet:

Note: The code is too long, so I can not paste it here, but I can describe that all svgs elements are in absolute positioning inside a container with relative positioning, and these svgs are inserted inline on the screen, ie it is not a path of the image, notice that the beard is the only one that has remained in place, even if it is with the same positioning parameters as the others.

    
asked by anonymous 08.10.2018 / 15:38

1 answer

1

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

That did not work: 

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

I had to do this to fix the problem: 

<span class="element"><svg width="500px" height="100px" ...> ... </svg></div>
    
08.10.2018 / 17:54
Run Event TextBox c # WPF Redirect with curl