jQuery Forum

Hi, I'm both new to the forum and to using JQM

I have been developing an app based on JQM and have moved this onto use JQM 1.2.0 to access the 'pop-up' features this has brought to us (all of which have proved very successful for my task). This development has been based on a web-app with testing primarily using a web server base, with the intention of running the final site through Phonegap.

I have a completed app running successfully using JQM 1.1.0 and the appropriate CSS-details below

<link rel="stylesheet" href="css/jquery.mobile.css" />
<link rel="stylesheet" href="css/my.css" />
 <script src="scripts/jquery.min.js">
 </script> <script src="scripts/jquery.mobile-1.1.0.min.js">

The CSS in this original set up above was modified to load a background image in the body as so:

.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button { font-family: Helvetica, Arial, sans-serif; background-image: url(images/camo-bg.jpg); }
.ui-body-a .ui-link-inherit {
    color:     #fff /*{a-body-color}*/;
}

This worked perfectly in all browsers allowing the background to load OK and the app ran through Phonegap and generated a fully functional app with the background in place.

............................................................................

On installing and loading JQM 1.2.0 and associated CSS files as below in an identical app/site build:

<link rel="stylesheet" href="../../css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="../../css/my.css" />
<script src="../../scripts/jquery-1.8.2.min.js">
</script> <script src="../../scripts/jquery.mobile-1.2.0.js">
</script> <script src="../../scripts/pop-up.js"></script>

And making similar changes to the CSS as below (image location is different in this set up)

.ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button { font-family: Helvetica, Arial, sans-serif; background-color: #222; background-image: url(camo-bg-2040.jpg) ; background-position: 100% 0; }
.ui-body-a .ui-link-inherit {
    color:     #fff /*{a-body-color}*/;
}

Whilst the background image loads in all web browsers, it doe's NOT in the IOS (ipad, ipod touch) versions of mobile Safari, on all versions of IOS (4.5,6) and when run through Phonegap to create a native app, doesn't work either.

See attached image for reference to the problem.

I can only imagine, having made numerous adjustments to the CSS to find a solution, that something else has has changed somewhere in JQM 1.2.0 and jquery.mobile-1.2.0 css, that I am probably not experienced enough to track.

I'm hopeful that this is either a simple error or a change in the base of JQM that has not taken account of its effect on IOS browsers.

I am equally hopeful that someone may have an experience of this and be able to offer solution / answer to this problem as there is risk I won't have any hair left to pull out very soon.

Look forward to any suggestions......

David