L'arrière-plan CSS s'étire pour remplir l'écran sur Safari mais pas sur iOS

Ce CSS étend avec succès mon image de fond pour remplir 100% de la zone de l'écran et ne pas défiler sur Safari mais pas sur iOS. Comment puis-je également empêcher le défilement de l'image sur iOS?

body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: url(../img/background.jpg) center repeat-x; background-size: auto 100%; background-attachment: fixed } 

 body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: url(../img/background.jpg) center repeat-x fixed; } 

J'ai renoncé à essayer de faire fonctionner mon iPhone avec CSS, et j'ai dû utiliser jQuery.

Dans ma page Web, j'ai ajouté un <div> que je veux remplir l'écran:

 <body> <div class="cssFullScreen" /> ...etc... 

Puis j'ai ajouté deux cuillères à soupe de CSS …

 <style> .cssFullScreen { position: absolute; left:0px; top:0px; background: url(BackgroundImage.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style> 

..et un scoop réticent de jQuery …

 <script src="jquery-2.2.3.min.js"></script> <script type="text/javascript"> $().ready(function () { ResizeWindows(); $(window).resize(function () { ResizeWindows(); }); }); function ResizeWindows() { // When the user resizes the window, we'll resize any DOM elements // with the "cssFullScreen" class. var width = window.innerWidth ? window.innerWidth : $(window).width(); var height = window.innerHeight ? window.innerHeight : $(window).height(); $(".cssFullScreen").width(width); $(".cssFullScreen").height(height); } </script> 

Ce n'est pas joli, mais c'est la seule chose que j'ai pu find qui a vraiment marché sur un iPhone.

Et étrangement, ce code ne fonctionnait que sur un iPhone lorsqu'il était appliqué à un div . Si j'ai essayé de l'appliquer directement sur le html ou le body , ça n'a rien fait …