[CSS] positionnement curieux sur iPad

Salut à tous,

j'ai une curiosité de rendu sur iPad, si j'utilise ce style de positionnement (supposons pour l'exemple que j'aie un graphisme de 1000 px de large, et que ce dernier soit centré) :

#madiv {
position:absolute;
top:0;
left:50%;
margin-left:-500px;
/* pour mettre #madiv en haut à gauche de mon graphisme de 1000px centré */
}

Si sur tous les navigateurs, le rendu est correct, sur iPad, #madiv est positionnée trop à gauche. J'ai bien mis le viewport ainsi :

<meta name="viewport" content="width=device-width, height=device-height" />

mais ça n'y fait rien.

Quelqu'un saurait de quoi ça peut venir ?
(j'ai bien réussi à contourner le problème, mais je suis curieux)

D'avance merci pour toute aide,
Nico

EDIT : C'est sur cet exemple.

Re-EDIT :
Voici un autre test sans le margin-left, le problème vient du 50%.
Modifié par Nico3333fr (01 Jul 2011 - 12:37)

Salut,

Et si ta div tu la plaçais comme ça :

#madiv { 
position:relative; 
top:0; 
left:0; 
}

A condition qu'elle soit fille de ta div de 1000px de large.
Sinon le code CSS fourni parait un peu douteux, combiner margin-left et position left... Je pense qu'une des deux déclarations sera écrasée ou non prise en compte.

Salut,

JuJu57 a écrit :
Sinon le code CSS fourni parait un peu douteux, combiner margin-left et position left... Je pense qu'une des deux déclarations sera écrasée ou non prise en compte.

Ce qui est surtout curieux, c'est qu'aucune largeur n'est déclarée, chose qui n'est pas de trop quand on combine positionnement absolu, marge gauche négative et positionnement à 50 %.

Autant pour moi, j'ai pas été assez précis : #madiv n'est pas fille de la div de 1000px de large, elle est avant, si elle était fille, c'eut été réglé !

<div id="madiv">blabla</div>
<div id="millepx">dnsfjdsf</div>

Et en spécifiant la largeur de #madiv, ça ne change rien sur l'iPad.

Essayez cet exemple. ça marche parfaitement sur Firefox, mais sur iPad, ça bugge. Quelqu'un sait pourquoi ?
Modifié par Nico3333fr (07 Jun 2011 - 15:55)

Pourquoi ne pas passer par un simple couple (left:0;top:0) ?

hakkou a écrit :
Pourquoi ne pas passer par un simple couple (left:0;top:0) ?

Si je fais ça, #madiv va être en haut à gauche de toute la page, pas de la div #millepx centrée qui la suit.

(oui, je peux faire autrement et j'ai déjà contourné le problème, je cherche juste à comprendre pourquoi l'exemple ci-dessus foire sur iPad)

Je sais pas trop pourquoi ça pose problème. Mais pour te faire une idée, j'imagine que tu peux supprimer le margin-left négatif et déjà voir si le left:50% fonctionne correctement.

fvsch a écrit :
Je sais pas trop pourquoi ça pose problème. Mais pour te faire une idée, j'imagine que tu peux supprimer le margin-left négatif et déjà voir si le left:50% fonctionne correctement.

Voici un autre test sans le margin-left, je regarde sur l'iPad dès que j'en ai un sous la main.

J'ai regardé sur un iPad chez Darty, le problème persiste : le

left:50%;

n'est clairement pas centré.

Une idée ?

Je m'auto-réponds : testé sur iPad 1 et 2, le problème est toujours présent. Une idée de quoi ça vient ?

J'aurais penché pour un problème en l'absence de <meta name="viewport" content="width=device-width">, mais tu l'utilises dans ton exemple.
Il faudrait pouvoir tester en détail et mesurer à quoi correspond la dimension calculée de ton left:50% sur iPad. Ça te donnerait une piste...

bonjour,

dans Firefox en dessous de 1000px de largeur , ça bug aussi :
width:300px et margin-left:-500px; il y a forcement un risque de "voir" disparaitre 200px de #madiv sur un viewport ou écran de - 1000px de largeur.
(sous reserve que ce soit le ug dont tu parles)

Sans Ipad sous la main , je te propose de tester un min-width:1000px; sur body et/ou html <edit> j'oubliais de préciser aussi d'appliquer un "position:relative;" conjointement a min-width., sur body par exemple </>

Cordialement,
GC

<reedit reedit>probleme identique sous android 2.3 htc desire hd en 960 , un morceau manque aussi , a moins de faire un zoom negatif en adaptant la page a la largeur de l'ecran.

En bref, tu est en plein dans le gros defauts des marges négatives , Ipad appliquerait aussi correctement tes styles </reedit reedit>
Modifié par gc-nomade (01 Jul 2011 - 20:01)