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
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.
Answering my own question, with information and reference to anyone else who might hit the problem in the future. Image size prevented the image being loaded.
The image loaded to use as the background of my app was outside a limit set within the iOS system, and whilst I have yet to discover the actual size limit in scale or Kb dimensions reducing the image to around 150Kb has resolved the issue.
A similar problem arose on a page where a large (long) image exceeded 300Kb, image size and quality needed to provide a hi res file for the retina screen on the new iPads, and the image refused to load, leaving the allocated maximum space in the page layout, but no image.
In this final case 'slicing' the image and using a grid to reassemble the image resolved the issue, the solution was not the same for the background as it could not be sliced and repeated as the pattern was too random. An alternative background solution is to be sought.
A point of information for anyone considering reassembling a sliced image in a grid, you will need to apply a negative margin to the top of the second and subsequent rows to bring them together as per the following example:
<div class="ui-block-a" style="margin-top: -5px">
Hope it saves someone a problem in the future!
Leave a comment on davebatten's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic