28172 sujets

CSS et mise en forme, CSS3

New Ipad, background-size:cover, crashes

Bonjour,
En plein dévelopement d'un site, qui s'adapte au format ipad par le biais de media queries, safari (ios 5.1,1 sur new ipad) plante automatiquement lors du chargement de la page en mode portrait. En mode paysage, il loade normalement.
Je possède une dizaine de background-size : cover.
Le problème ne se présente pas à partir du moment où dans la feuille de style en mode portrait je ne mets pas de hauteur (height:1024px;). Mias comme vous l'imaginez j,ai besoin de lui mettre une hauteur.
Si vous avez déjà rencontré ce problème, et si vous avez des idées, n'hésitez pas.
Merci.
salut,

peux tu mettre plus d'infos (ou des portions de code) ?
la hauteur de 1024 tu l'appliques sur quel(s) élément(s) ?
as tu essayé avec une valeur inférieure pour voir ?
on peut tester ? (site en ligne)
Bonjour, alors quelques infos:

la structure est du type:

<div class="partFourteen back">
	<div class="twelve row paraf">
	 <div class="six columns">
</div>
	 <div class="six columns">
</div>
</div>
</div>


La première div contient mon background, pour les deux autres j'utilise le framework foundation donc j'ai une construction du type grid basique.

Au niveau, du css:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.partFourteen{
                  height:1024px;                                   
                  width:768px;
                  background-color:@color_black;
                  background:  url(../../images/background_ipad/bkg_img_00.jpg) 50% 0 no-repeat;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;
                  background-size: cover;
                  float: left;
}
}


La variable dans le css est du fait que j'utilise lesscss.

J'ai mis toutes mais div principales en -webkit-transform: translate3d, car j'utilise le plugin jquery touchSwipe.


Pour l'instant il met impossible de vous le montrer pour des problèmes de confidentialités.


Pour ton idée de mettre une taille inférieur j'ai essayé et il se trouve que cela marche. Mais je ne peux pas dépasser une hauteur de 500px. Au delà, safari plante directement.

Ce qu'il faut savoir c'est que sur mon ipad de 2ème génération, tout fonctionne correctement.

Merci.
Modifié par sinifikant (29 May 2012 - 15:51)
J'ai trouvé. Pour information l'ipad 3 n'aime pas trop le webkit-translate lorsque les images ne sont pas toutes chargées, donc je laisse charger les images et avec un timer en jquery, je lui mets le css.

Et ça marche.
Sujet clos
Aller à