Image does not work correctly in android app

Question

Image does not work correctly in android app

Navigation

#1 by (1 votes)

1

I am developing an app using HTML + JavaScript + CSS with Cordova. This app uses SVG images to better suit the different resolutions, but I run into a problem: although the images are displayed well on my computer and in the android emulator, when I install the app on a device, the SVGs do not come.

I guess it has to do with the version of the device I'm using that will not support SVG (android 4.1 Jelly Bean); but obviously I'm not interested in my app seeing no graphics.

I tried to see if the problem was that SVG was not supported by my version of Android but the following code ( obtained from CSS tricks ):

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");

returned true which means that SVG is supported. Also, putting the images in a img made them work (I have tried several different routes, the one in the CSS below is correct and works in the emulator and in the browser)

I tried Blonfu's suggestion and that also helped me realize that the problem is not the format of image (fails with SVG and PNG), but something different. Maybe some CSS property that causes some kind of conflict and fails on Android.

This is the CSS (the previous one was a minimal version):

#answers .option1::before {
    content:"";
    position:absolute;
    height:15vh;
    width:15vh;
    top:-2.5vh;
    left:0;
    background:url("../img/icon1.svg");
    background-size:contain;
    background-repeat:no-repeat;
}

But there is still no background image displayed on the device (while it is displayed on the emulator and browser).

What is wrong, why can not I see the image and how can I solve it?

android css3 css svg cordova

asked by Alvaro Montoro 02.08.2016 в 14:56

source

1 answer

Multiple filters in a database query from Laravel How to return a data list of an asyncTask class?

score 1 · Accepted Answer

Besides what I have put in the comment yes you can do something to show one image or another: "multiple funds", put everything in the same background but separated with commas instead of repeating the property as you have done:

 background-image: url('../img/miImagen.svg'), url('../img/miImagen.png')

Actually what you do is use both images at the same time but it works if one fails, the problem could be if you have two different images and transparencies because you would see the image below but in your case they will be the same should not give problems.

UPDATE:

With the complete code I see that vh units are being used to determine the dimensions of the element, before Android 4.4 these units were not supported so the pseudo-element ::before has no size and is not shown, you have to change the units, to percentages for example.