1485 sujets

Web Mobile et responsive web design

Safari (iPad) : div avec liseret

bonjour le forum,

1er post, j'espère pas au mauvais endroit.

en bref : j'ai un liseret (ou un border mais plus fin qu'avec un attribut thin) qui apparaît autour de mes divs quand je consulte le site sur iPad (safari ou même Lunascape par ex.).
ces liserets disparaissent ou ré-apparaissent en fonction du zoom que j'applique.

j'ai essayé la propriété border et ses attributs dans tous les sens. cela n'a rien donné.

la seule chose dont je sois (à peu près) certain, c'est que cela ne concerne que des divs avec une image en background. là aussi, j'ai à peu prés tout essayé. la version "shorthand" ou bien déclarer attribut par attribut, en prenant soin de bien conservé l'ordre préconisé (color, url, repeat, etc.)

ce problème me rend dingue. j'ai écumé le forum et google sans résultat.
bien entendu aucun problème sur un navigateur "normal" (safari, IE, chrome, FF)

une âme charitable aurait elle une piste ?

un grand merci d'avance

O
Modifié par o06 (17 Sep 2010 - 15:04)
Je pense que c'est surtout un bug de safari 4. Heureusement, il devrait disparaitre avec la prochaine version du système qui intègrera safari 5.

Arghh, quoique, je viens de vérifier sur un ipod en iOS 4.1, le bug y est toujours...

A priori, il s'agit d'un bug de redimensionnement avec l'antialiasing...
Modifié par Borak (17 Sep 2010 - 09:08)
merci pour ta réponse Borak.

pourrais tu m'indiquer le site, la page ou tu as trouvé l'info concernant l'antialiasing STP ?

par contre je pense qu'il doit y avoir un moyen de régler ça, car je ne pense pas être le seul à utiliser des div avec image en fond, et pour l'instant je n'ai pas vu de comportement similaire.

j'ai essayé sur un iPhone 4.1 (8b117), et effectivement le problème est encore plus prononcé.

je profite de ce post pour demander si vous connaissez des sites dédiés aux CSS sur la version iOS (mobile quoi) de Safari ? (bugs, astuces, etc.)

merci.
Re le forum,

apparemment, je dis bien apparemment, le problème disparaît en définissant une taille spécifique au body{} (980px pour iPad, info trouvée sur le forum).

reste plus qu'à mettre un test conditionnel pour détecter si j'ai à faire à ce type de device.
(ou bien je fais le cochon et je centre mon site quand c'est pas un iPad)

bon, non, ça ne résout rien. en tous les cas plus quand je met du contenu dans les divs.
Modifié par o06 (17 Sep 2010 - 15:05)
Re,

je reviens à la charge, n'ayant toujours pas trouvé d'explication (à défaut d'une solution).
je m'en remet aux "cadors" du CSS.

je vous fournie l'image avec à gauche les divs et leurs liserets, et à droite ces mêmes divs "zoomés" et les liserets qui disparaissent.

ainsi que les fichiers html et css.

merci pour votre aide.

O

upload/32111-pb.png

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="ob_css1.css" rel="stylesheet" type="text/css" />
<!--javascript-->
<script type="text/javascript" src="ob.js"></script>
</head>
<body>
<!--header-->
<div id="header"></div>
<!--main_container-->
<div id="main_container">Content for  id "main_container" Goes Here</div>
<!--footer-->
<div id="footer"></div>
</body>
</html>


css
@charset "UTF-8";
body {
	width:980px;
	margin: 0px auto;
	padding: 0px;
	background-color: #134299;
}
#header {
	background:url(img/fond_header.png) repeat-x;
	height: 165px; /*180px;*/
	padding: 15px 0px 0px 100px;
	margin:0px;
}
#main_container {
	height:100%;
	padding-left: 100px;
	padding-right:100px;
	background-color: #FFF;
	margin-top:0px;
	margin-bottom:0px;
}
#footer {
	background-image:url(img/fond_footer.png);
	height: 120px;
	padding-left:100px;
	padding-right:100px;
	margin-top:0px;
	margin-bottom:0px;
}
Sujet clos
Aller à