У меня есть фрагмент HTML ниже, который прекрасно отображается во всех браузерах. Однако в webkit на iphone и ipad, когда я зажимаю страницу (чтобы она стала меньше), я вижу черную рамку, которая является цветом фона тела, просвечивающего только на правом краю. Это происходит только тогда, когда я указываю ширину .headerpic div. Так как это единственное место в документе, в котором я указываю ширину, мне было интересно, почему он не останавливается до полного рендеринга до правого края (поскольку это теоретически самая широкая часть документа?).
Я прикрепил фото того, как оно выглядит с моего ipad.
<!doctype html>
<html>
<head>
<style>
body {background-color:#000;color:#231f20;margin:0;}
#wrapper {background-color:#fff;min-height:1000px;}
#header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;}
#footer {color:#fff;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="headerpic">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
