I am currently using the ionic framework to develop my upcoming app. I encountered an issue while trying to set a background SVG image for body. The background displayed perfectly on desktop browsers like Firefox and Chrome, as well as on my Nexus 4 device. However, when I tested it on a Xiaomi Redmi device owned by a friend, there was a gap between the top and bottom of the background image.
Screenshot from the Nexus:
Screenshot from Xiaomi:
You can see in the images that the background position is not starting from the top as intended. When testing on another device, Alcatel, the same gap persisted, only larger this time. On Motorola G and Samsung Galaxy S5, the background image displayed perfectly.
The CSS code applied to body is as follows:
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;
}
Here is a snippet of my SVG file:
<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">
<!-- SVG path data along with styling attributes -->
</svg>