0

I have a simple page 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
   .ui-page-theme-a {
  background-image: url(../../Resources/Bingo/WebBingo/En/Common/Images/bg.png);
  -moz-background-size-: cover;
  -o-background-size-: cover;
  -webkit-background-size-: cover;
  background-size-: cover;
}
</head>
<body >
    <div id="preloader" style='background-color: #FF5794; position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;'> </div>
</body>

when I test it in safari on iPad the page can be scrolled and there is a white space below the page. How I can remove it? Removing the meta tags has no effect. I play with debug version of jquery.mobile-1.4.1 and this line seems to be related with

base = fauxEle = $( "", { "href": fauxBase }).appendTo( "head" );

in method

baseTagTest.

I remove loader from jqm so the white space not came from there

enter image description here

[1https://i.stack.imgur.com/2Scaw.jpg">

I don't want to use any kind of footer because my page use background and canvas.

How to remove the white line if I have an image as theme background

Cœur
  • 37,241
  • 25
  • 195
  • 267
Azzy Elvul
  • 1,403
  • 1
  • 12
  • 22
  • 1
    Use position:fixed instead of absolute http://stackoverflow.com/questions/19012135/ios-7-ipad-safari-landscape-innerheight-outerheight-layout-issue – RobinvdA Feb 13 '14 at 15:00
  • `body { height: 100% !important; }` body's height is set to `99.9%`. – Omar Feb 13 '14 at 15:09
  • Yes, I saw this magic number ( why it is 99.9 % ). Changing the value did not affect this line. If I have an image as theme background how can avoid this white space? – Azzy Elvul Feb 13 '14 at 15:30
  • you want background for page or body? – Omar Feb 13 '14 at 15:46
  • In my project I have only one page so for me the page and body are equal. – Azzy Elvul Feb 13 '14 at 15:48

2 Answers2

1

I'm assuming you are trying to to make the div overlap other content.

Try setting the position property to fixed as shown:

<div id="preloader" style='background-color: #FF5794; position: fixed; height: 100%; width: 100%; left: 0px; top: 0px;'> </div>

This will make the position relative to the view port. This means that when the user scrolls the div will follow the user and stay in the same place on the screen.

Benjamin Albert
  • 738
  • 1
  • 7
  • 19
  • This will fix the example but if I have an image as theme background the white line will still exists. – Azzy Elvul Feb 13 '14 at 15:25
  • Assuming this doesn't effect your design you can set the background in the body selector. `body { background: ...; }` – Benjamin Albert Feb 13 '14 at 15:33
  • ui-overlay theme are applied after page load so it will be override my css but with !important this can halp me. I'll test this. – Azzy Elvul Feb 13 '14 at 15:42
0

You can add css to your body tag,

<style>
  body{
    margin:0;
    padding:0;
  }
</style>
Krish R
  • 22,583
  • 7
  • 50
  • 59