Cordova css Eigenschaften funktioniert nicht in allen Geräten gleich

Question

Ich benutze ionischen Rahmen um meine nächste App zu bauen. Ich versuche, ein Hintergrund-Svg-Bild zu body, in Desktop-Browsern (Firefox & Chrom) es ist perfekt, auf meinem Nexus 4 das Hintergrundbild ist perfekt, aber wenn ich in meinem Freunde Gerät versucht, dh Xiaomi Redmi, die Hintergrundbildposition ist nicht richtig, es zeigt eine Lücke von oben und unten. Hier

ist der Screenshot von Nexus:

Screenshot von xiaomi:

Wie Sie die Hintergrund-Startposition sehen kann, ist nicht von oben. Als ich ein anderes Gerät .i.e. Alcatel eincheckte, bleibt die Lücke noch, aber dieses Mal ist es größer. In Motorola und Samsung Galaxy S5 ist das Bild perfekt.

Dies ist der CSS-Code body angewendet:

body { 
    background-image: url("../img/bg.svg") !important; 
    background-repeat:no-repeat !important; 
    background-position:0 0 !important; 
    height:100vh !important; 
    width:100% !important; 
    background-size:100% 100% !important; 
    padding:0 !important; 
    margin:0 !important; 
    position:relative !important; 
    background-attachment:fixed !important; 
} 

Hier ist meine SVG-Datei

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<!-- Creator: CorelDRAW X6 --> 
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1.06666in" height="1.6in" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
viewBox="0 0 1067 1600" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <style type="text/css"> 
    <![CDATA[ 
    .fil13 {fill:none} 
    .fil10 {fill:#3C8071} 
    .fil9 {fill:#44693E} 
    .fil5 {fill:#4F7544} 
    .fil4 {fill:#659676} 
    .fil3 {fill:#738962} 
    .fil1 {fill:#87A790} 
    .fil6 {fill:#B2922F} 
    .fil7 {fill:#B47D2A} 
    .fil8 {fill:#B8A636} 
    .fil2 {fill:#E6E9D4} 
    .fil12 {fill:#F5F2D3} 
    .fil11 {fill:#F6F1D4} 
    .fil14 {fill:#373435;fill-opacity:0.149020} 
    .fil0 {fill:url(#id1)} 
    ]]> 
    </style> 
    <clipPath id="id0"> 
    <path d="M0 0l1067 0 0 1600 -1067 0 0 -1600z"/> 
    </clipPath> 
    <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="533.331" y1="237.996" x2="533.331" y2="1360.45"> 
    <stop offset="0" style="stop-color:#86CACB"/> 
    <stop offset="0.721569" style="stop-color:#BDDFDB"/> 
    <stop offset="1" style="stop-color:#F5F5EC"/> 
    </linearGradient> 
</defs> 
<g id="Layer_x0020_1"> 
    <metadata id="CorelCorpID_0Corel-Layer"/> 
    <g> 
    </g> 
    <g style="clip-path:url(#id0)"> 
    <g> 
    <rect class="fil0" x="-74" y="-3" width="1214" height="1604"/> 
    <path class="fil1" d="M-74 1473l0 -315c88,65 158,315 158,315l-158 0z"/> 
    <path class="fil2" d="M-74 1233l0 -74c19,14 37,36 53,62 -1,1 -2,1 -3,1 -6,-2 -39,-16 -39,-16l-1 34 -9 -6z"/> 
    <path class="fil1" d="M1140 1170l0 290 -179 0c0,0 90,-271 179,-290z"/> 
    <path class="fil3" d="M384 1458c0,0 254,-474 335,-476 80,-3 329,464 329,464l-664 12z"/> 
    <path class="fil4" d="M52 1457c0,0 123,-296 240,-292 117,5 218,292 218,292l-458 0z"/> 
    <path class="fil1" d="M267 1451c0,0 98,-296 191,-292 93,5 173,292 173,292l-364 0z"/> 
    <path class="fil5" d="M1109 1350c0,13 2,22 7,27 0,0 -5,0 -8,-2 2,8 5,15 9,20 0,0 -6,-1 -9,-2 3,7 6,13 10,18 -11,0 -21,0 -32,0 5,-4 10,-10 14,-18 -3,1 -9,1 -9,1 4,-4 9,-10 13,-20 -3,2 -7,3 -8,3 6,-4 11,-13 14,-29z"/> 
    <path class="fil6" d="M423 1474c-67,-24 -140,-49 -222,-56 -126,-11 -201,34 -274,10l0 18 0 155 1214 0 0 -118 0 -43 0 -26c-169,-57 -281,3 -368,55 -44,26 -82,50 -118,56 -69,10 -145,-20 -232,-51z"/> 
    <path class="fil7" d="M888 1414c-79,0 -139,17 -183,26 -24,5 -43,8 -57,4 -19,-5 -46,-12 -81,-18 -73,-12 -175,-20 -280,8 46,11 88,26 129,41 90,32 169,64 241,53 37,-5 77,-31 123,-58 32,-19 68,-40 108,-55z"/> 
    <path class="fil5" d="M439 1380c1,20 5,35 15,44 0,0 -9,-1 -15,-4 5,13 10,25 18,32 0,0 -11,-2 -16,-3 6,12 12,21 20,29 -20,0 -40,0 -60,0 9,-6 17,-17 24,-29 -6,1 -16,2 -16,2 8,-7 15,-16 22,-31 -6,4 -14,6 -15,5 10,-7 19,-21 23,-46z"/> 
    <path class="fil5" d="M196 1378c1,28 5,47 15,60 0,0 -9,-1 -15,-5 5,18 10,34 18,44 0,0 -11,-2 -16,-4 6,16 12,30 20,40 -20,0 -40,0 -60,0 9,-8 17,-23 24,-40 -6,2 -16,3 -16,3 8,-10 15,-22 22,-43 -6,5 -14,8 -15,7 10,-9 19,-29 23,-63z"/> 
    <path class="fil5" d="M1066 1377c2,21 6,39 16,48 0,0 -6,-4 -11,-7 1,14 6,40 13,48 0,0 -8,-4 -13,-8 1,19 9,29 17,36 -22,8 -39,10 -58,3 9,-6 17,-27 18,-39 -6,2 -16,9 -16,9 8,-7 21,-34 29,-50 -6,4 -14,6 -16,6 11,-7 18,-18 22,-46z"/> 
    <path class="fil5" d="M579 1320c3,27 10,47 25,59 0,0 -13,-1 -21,-5 8,18 16,34 27,44 0,0 -15,-2 -22,-4 9,16 19,29 30,40 -27,0 -54,0 -81,0 11,-8 22,-22 30,-39 -7,2 -22,3 -22,3 10,-9 19,-22 27,-42 -8,5 -18,7 -20,7 13,-9 23,-28 27,-62z"/> 
    <path class="fil5" d="M906 1408c4,21 8,39 19,48 0,0 -6,-4 -12,-7 2,14 8,40 17,48 0,0 -8,-4 -14,-8 2,19 11,29 19,36 -22,7 -38,9 -57,2 8,-6 15,-26 15,-38 -6,1 -15,8 -15,8 7,-7 19,-33 25,-49 -6,4 -13,6 -15,5 10,-7 16,-18 18,-45z"/> 
    <path class="fil8" d="M423 1475c-68,33 -129,68 -194,58 -104,-15 -148,-108 -302,-86l0 155 1214 0 0 -118 0 -43c-15,5 -29,13 -44,23 -42,28 -87,66 -168,58 -66,-6 -109,-30 -156,-52 -22,-10 -45,-20 -72,-28 -21,-6 -44,-11 -70,-14 -22,-2 -42,-2 -62,0 -54,6 -101,26 -145,47z"/> 
    <path class="fil9" d="M501 1403c4,35 13,61 33,76 0,0 -16,-1 -27,-6 11,23 21,43 35,57 0,0 -19,-3 -29,-5 12,21 24,38 39,51 -35,0 -70,0 -105,0 14,-11 28,-29 38,-51 -10,3 -28,4 -28,4 13,-12 25,-28 35,-55 -10,6 -23,10 -26,9 17,-12 30,-37 35,-80z"/> 
    <path class="fil9" d="M1007 1408c0,31 3,58 17,73 0,0 -8,-7 -16,-12 0,20 10,57 20,69 0,0 -11,-7 -18,-14 -1,28 9,43 20,56 -34,8 -59,8 -86,-4 14,-8 29,-37 31,-55 -9,1 -25,11 -25,11 13,-9 29,-44 43,-66 -9,5 -21,7 -24,6 17,-9 29,-24 38,-64z"/> 
    <path class="fil5" d="M943 1320c4,22 9,42 21,51 0,0 -6,-5 -13,-8 2,15 9,43 18,51 0,0 -9,-4 -15,-9 2,20 11,31 21,39 -23,8 -41,9 -62,2 9,-7 16,-28 16,-41 -6,2 -16,9 -16,9 8,-8 20,-36 27,-52 -6,4 -14,6 -16,6 11,-7 17,-19 20,-48z"/> 
    <path class="fil5" d="M1038 1331c1,14 4,27 11,33 0,0 -4,-3 -8,-5 1,9 4,28 9,33 0,0 -6,-3 -9,-6 1,13 6,20 12,25 -15,5 -27,7 -40,2 6,-4 12,-19 12,-27 -4,1 -11,6 -11,6 6,-5 15,-24 20,-34 -4,3 -10,4 -11,4 7,-5 12,-13 15,-32z"/> 
    <path class="fil5" d="M868 1352c2,17 5,33 14,41 0,0 -5,-4 -9,-7 1,11 5,34 12,40 0,0 -7,-4 -11,-8 1,16 8,24 14,31 -18,5 -32,6 -48,-1 7,-5 14,-21 14,-31 -5,1 -13,6 -13,6 7,-6 17,-27 23,-40 -5,3 -11,4 -13,4 9,-5 14,-14 17,-37z"/> 
    <path class="fil5" d="M769 1340c3,17 7,32 16,40 0,0 -5,-4 -10,-6 2,11 7,33 14,40 0,0 -7,-3 -11,-7 2,16 9,24 16,30 -18,6 -32,7 -48,2 7,-5 13,-22 12,-32 -5,1 -13,7 -13,7 6,-6 16,-28 21,-41 -5,3 -11,5 -13,5 9,-6 14,-15 15,-38z"/> 
    <path class="fil5" d="M671 1330c-2,21 -5,39 -15,48 0,0 5,-4 11,-7 -1,14 -5,40 -12,48 0,0 8,-4 13,-8 0,19 -8,29 -16,37 22,8 40,9 58,2 -9,-6 -18,-27 -18,-39 6,1 16,9 16,9 -8,-7 -22,-34 -30,-49 6,4 14,6 16,5 -11,-7 -18,-18 -23,-45z"/> 
    <path class="fil5" d="M348 1377c2,33 10,57 27,72 0,0 -15,-1 -25,-6 9,22 17,41 31,53 0,0 -18,-2 -27,-5 10,20 21,35 35,48 -33,0 -66,0 -99,0 14,-10 28,-27 38,-48 -9,2 -26,3 -26,3 12,-11 24,-26 35,-51 -9,6 -22,9 -25,9 17,-11 30,-35 36,-75z"/> 
    <path class="fil5" d="M310 1364c1,26 5,45 15,57 0,0 -9,-1 -14,-5 5,17 9,32 17,42 0,0 -10,-2 -16,-4 6,16 11,28 19,38 -19,0 -38,0 -57,0 8,-8 17,-22 23,-38 -5,2 -15,3 -15,3 7,-9 14,-21 21,-41 -6,5 -13,7 -15,7 10,-9 18,-27 22,-60z"/> 
    <path class="fil5" d="M242 1367c0,20 4,35 13,44 0,0 -8,-1 -13,-4 4,13 8,25 15,32 0,0 -9,-2 -14,-3 5,12 10,21 17,29 -17,0 -34,0 -51,0 7,-6 15,-17 21,-29 -5,1 -14,2 -14,2 7,-7 13,-16 19,-31 -5,4 -12,6 -13,5 9,-7 16,-21 20,-46z"/> 
    <path class="fil5" d="M156 1357c0,14 3,24 9,30 0,0 -5,0 -9,-2 3,9 6,17 10,22 0,0 -6,-1 -10,-2 4,8 7,15 12,20 -12,0 -23,0 -35,0 5,-4 10,-11 14,-20 -3,1 -9,1 -9,1 5,-5 9,-11 13,-21 -3,2 -8,4 -9,4 6,-4 11,-14 14,-31z"/> 
    <path class="fil5" d="M403 1358c0,14 3,24 9,30 0,0 -5,0 -9,-2 3,9 6,17 10,22 0,0 -6,-1 -10,-2 4,8 7,15 12,20 -12,0 -23,0 -35,0 5,-4 10,-11 14,-20 -3,1 -9,1 -9,1 5,-5 9,-11 13,-21 -3,2 -8,4 -9,4 6,-4 11,-14 14,-31z"/> 
    <path class="fil5" d="M491 1357c-1,14 1,24 7,30 0,0 -5,0 -9,-2 2,9 5,17 9,22 0,0 -6,-1 -9,-2 3,8 6,15 11,20 -12,0 -23,0 -35,0 5,-4 11,-11 15,-20 -3,1 -10,1 -10,1 5,-5 10,-11 14,-21 -4,2 -8,4 -9,4 6,-4 12,-14 16,-31z"/> 
    <path class="fil5" d="M18 1367c0,14 2,24 7,30 0,0 -4,0 -7,-2 2,9 5,17 8,22 0,0 -5,-1 -8,-2 3,8 6,15 10,20 -10,0 -19,0 -29,0 4,-4 8,-11 12,-20 -3,1 -8,1 -8,1 4,-5 7,-11 11,-21 -3,2 -6,4 -7,4 5,-4 9,-14 11,-31z"/> 
    <path class="fil5" d="M108 1391c0,14 2,24 7,30 0,0 -4,0 -7,-2 2,9 5,17 8,22 0,0 -5,-1 -8,-2 3,8 6,15 10,20 -10,0 -19,0 -29,0 4,-4 8,-11 12,-20 -3,1 -8,1 -8,1 4,-5 7,-11 11,-21 -3,2 -6,4 -7,4 5,-4 9,-14 11,-31z"/> 
    <path class="fil10" d="M877 1057c26,-15 51,-22 75,-3 15,-40 36,-46 59,-46 -27,-2 -53,-2 -63,31 -26,-15 -49,-2 -71,18z"/> 
    <path class="fil10" d="M1022 967c7,-3 14,-4 20,2 5,-10 11,-11 17,-10 -7,-2 -14,-2 -18,6 -6,-5 -13,-2 -20,2z"/> 
    <path class="fil11" d="M322 927c-48,-6 -92,31 -92,80 137,0 274,0 412,-1 8,-40 -37,-69 -70,-47 -14,-34 -52,-51 -87,-40 -16,-27 -46,-45 -80,-45 -36,0 -68,21 -83,51z"/> 
    <path class="fil11" d="M-23 1093c-4,-3 -9,-4 -14,-4 -14,0 -25,11 -25,25 0,4 1,7 2,10l29 0 18 0 6 0 22 0 53 0 25 0 74 0 19 0 32 0 15 0 33 0 12 0 37 0c1,-2 1,-4 1,-6 0,-14 -11,-25 -25,-25 -2,0 -4,0 -6,1 -4,-17 -19,-30 -37,-30 -11,0 -20,4 -27,12 -6,-4 -13,-6 -21,-6 -6,0 -12,2 -17,4 -11,-20 -32,-34 -56,-34 -23,0 -44,13 -55,32 -8,-6 -18,-9 -29,-9 -19,0 -36,11 -45,27 -2,-1 -4,-1 -6,-1 -6,0 -11,2 -15,5z"/> 
    <path class="fil12" d="M857 1099c5,0 9,2 12,6 3,-4 7,-6 12,-6l2 0c6,-9 16,-15 27,-15 14,0 25,8 30,20 1,0 3,-1 5,-1 4,0 8,1 11,4 3,-4 8,-7 14,-7 10,0 17,8 17,17 0,2 0,4 -1,6l-22 0 -10 0 -12 0 -16 0 -32 0 -14 0 -8 0 -2 0 -7 0 -20 0c-1,-2 -2,-5 -2,-7 0,-5 3,-10 6,-13 3,-2 6,-3 10,-3z"/> 
    <path class="fil9" d="M74 1349c-3,36 2,71 -16,87 0,0 12,-5 18,-13 -1,24 -8,60 -21,74 0,0 8,-10 16,-18 1,34 -14,46 -30,56 39,13 65,12 97,1 -15,-11 -38,-44 -40,-65 10,3 25,12 25,12 -14,-12 -27,-37 -40,-64 11,6 19,9 23,9 -19,-12 -25,-31 -33,-77z"/> 
    <path class="fil2" d="M617 1078l56 -25 -10 74 52 -74 42 69 4 -66c0,0 29,35 34,40 5,5 16,-34 16,-34 -38,-49 -72,-82 -93,-81 -23,1 -61,41 -103,97z"/> 
    <path class="fil2" d="M527 1211c-21,-30 -45,-50 -69,-51 -27,-1 -54,22 -79,57 -8,10 -15,22 -22,34l37 -16 16 -7 -3 24 -6 49 20 -29 32 -45 33 54 10 16 2 -35 2 -31c0,0 4,5 10,12 9,11 21,25 25,29 4,4 11,-16 14,-27 -7,-11 -13,-22 -20,-32z"/> 
    <path class="fil2" d="M373 1210c-25,-26 -53,-44 -81,-45 -36,-1 -73,26 -107,65l52 -17 -6 38 48 -42 46 30 1 -34c0,0 31,14 36,16 3,1 8,-5 11,-11z"/> 
    <path class="fil10" d="M55 1162c11,-10 22,-17 37,-11 2,-21 12,-27 23,-30 -14,2 -26,6 -27,23 -15,-4 -24,5 -33,17z"/> 
    <path class="fil2" d="M1140 1170l0 63 -38 31 6 -38 -44 14c24,-36 50,-63 76,-69z"/> 
    <path class="fil5" d="M1140 1378l0 122c-16,3 -30,2 -45,-4 10,-6 20,-28 21,-41 -6,1 -17,9 -17,9 9,-7 24,-35 33,-52 -7,4 -15,6 -17,5 12,-7 20,-19 25,-48 0,3 0,6 1,8z"/> 
    <path class="fil5" d="M-74 1497l0 -80c5,18 10,34 17,44 0,0 -11,-2 -16,-4 6,16 12,30 20,40l-21 0zm0 -80l0 -42c2,21 6,37 15,47 0,0 -9,-1 -15,-5z"/> 
    <path class="fil9" d="M811 1361c3,36 8,67 26,83 0,0 -9,-7 -19,-13 1,24 8,69 21,83 0,0 -14,-7 -22,-14 1,33 14,49 28,63 -39,13 -68,15 -100,4 15,-11 30,-46 32,-66 -10,3 -28,15 -28,15 14,-12 38,-58 51,-85 -11,6 -24,10 -27,9 19,-12 31,-31 39,-78z"/> 
    </g> 
    </g> 
    <path class="fil13" d="M0 0l1067 0 0 1600 -1067 0 0 -1600z"/> 
    <path class="fil11" d="M852 697l5 29 28 17 -26 14 -7 32 -21 -21 -33 3 13 -27 -13 -30 29 4 25 -22z"/> 
    <path class="fil11" d="M201 676l-2 13 -13 7 12 6 3 14 10 -9 15 1 -6 -12 6 -13 -13 2 -11 -10z"/> 
    <path class="fil11" d="M661 585l3 18 17 10 -16 9 -4 20 -13 -13 -20 2 8 -16 -8 -19 18 3 15 -13z"/> 
    <path class="fil11" d="M167 841l-5 29 -28 17 26 14 7 32 21 -21 33 3 -13 -27 13 -30 -29 4 -25 -22z"/> 
    <path class="fil11" d="M209 600l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/> 
    <path class="fil11" d="M108 696l-3 -16 -16 -9 15 -8 4 -18 12 11 18 -2 -7 15 7 17 -16 -2 -14 12z"/> 
    <path class="fil11" d="M785 559l2 13 13 7 -12 6 -3 14 -10 -9 -15 1 6 -12 -6 -13 13 2 11 -10z"/> 
    <path class="fil14" d="M404 1515c70,0 127,8 127,19 0,10 -57,19 -127,19 -70,0 -127,-8 -127,-19 0,-10 57,-19 127,-19z"/> 
</g> 
</svg> 

Answer 1

Wie Wayferer erwähnt, ist dies höchstwahrscheinlich ein Unterschied zwischen den beiden Android-Versionen in Rendering (KitKat und Lollipop).

Es gibt ein paar Möglichkeiten, um das Problem zu beheben:

1. Geben Sie alle Ihre Android-Installationen die gleiche Browser-Version von den Crosswalk plugin verwenden. Crosswalk tauscht das WebView mit dem neuesten Chromium-Browser aus, so dass alle Android v.> 4.0-Geräte dasselbe sehen. Die Nachteile sind, dass:

   • Sie werden nicht in der Lage sein, zu unterstützen Android < 4.0
   • Sie auf PhoneGap nicht in der Lage sein, noch zu bauen bauen (sie unterstützen möchten, schließlich)
   • Der Download Größe für Ihre Anwendung wird größer, aufgrund des eingebetteten Browser

2. wenn Sie lieber den Unterschied aufzuspüren würden und lösen es ohne Fußgängerübergang, Sie einen Blick auf caniuse.com (http://caniuse.com/#feat=svg-css) in Anspruch nehmen, um zu sehen, ob es jedes offensichtliche Problem mit dem HTML/CSS cl Asses, die du verwendest. Sie können auch Remote-Debugging auf dem älteren Gerät versuchen (Anweisungen:), um zu sehen, welche Elemente das Problem verursachen.