Question

我正在使用离子框架来构建我的下一个应用程序。我正在尝试将背景svg图像设置为body，在桌面浏览器（firefox＆amp; chrome）中它是完美的，在我的nexus 4上，背景图像是完美的，但当我在我的朋友设备中尝试时，即小米Redmi ，背景图像位置不合适，它从顶部和底部显示出一些间隙。

以下是nexus的截图：

enter image description here

xiaomi的屏幕截图：

enter image description here

正如您所看到的，背景位置不是从顶部开始。当我检查另一台设备时。阿尔卡特，差距仍然存在，但这次它更大了。在motorola g和三星galaxy S5，图像是完美的。

这是应用于body的CSS代码：

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;
}

这是我的SVG文件

<?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

正如Wayferer所提到的，这很可能是两个Android版本（KitKat和Lollipop）之间渲染的差异。

有几种方法可以解决这个问题：

使用Crosswalk plugin为您的所有Android安装提供相同的浏览器版本。 Crosswalk使用最新的Chromium浏览器交换WebView，以便所有Android v。＆gt; 4.0设备会看到同样的事情。缺点是：
- 您将无法支持Android＆lt; 4.0
- 你将无法构建PhoneGap版本（他们最终计划支持）
- 由于嵌入式浏览器
如果你想在没有Crosswalk的情况下追踪差异并解决它，你可以看看caniuse.com（http://caniuse.com/#feat=svg-css），看看HTML / CSS类是否有任何明显的问题你正在使用。您还可以尝试远程调试旧设备（说明：https://developer.chrome.com/devtools/docs/remote-debugging），以查看导致问题的元素。

Cordova css属性在所有设备中都不起作用

1 个答案: