Мой сайт имеет фиксированную ширину видового экрана 1300 пикселей. И я обнаружил странное поведение фиксированных элементов в сафари в iOS. Никакие другие браузеры не делают этого.Исправлена ошибка с шириной элемента в сафари?
Итак, я делаю тестовую страницу (код внизу). Он имеет 3 divs - статический, абсолютный, фиксированный. Все 100% ширины. viewport - 1300px. И есть простой js, который печатает ширину каждого div. Все настольные браузеры игнорируют окно просмотра, все divs равны друг другу и ширины окна. Это верно.
Браузер Android (стандартный и мобильный firefox) устанавливает ширину окна до 1300px и ширину всех divs до 1300px независимо от ориентации. Это верно.
Проблема с моим ipod и iphone моего друга. Верхние divs равны 1300px, но нижний div (с фиксированным положением) равен 1280px. И это происходит только в портретной ориентации. В альбомной ориентации все divs являются нормальными (1300px). Почему фиксированная ширина div в ландшафтном режиме составляет 1280 пикселей? Это действительно ошибка в сафари? Или я что-то пропустил?
Код тестовой страницы:
<!doctype html>
<html>
<head>
<meta content="width=1300" name="viewport" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type=text/javascript>
function updateInfo()
{
$("div.test").each(function()
{
var t = $(this);
var w = t.width();
t.find("span").html("width = "+w);
});
}
$(function(){setInterval(updateInfo,100);});
</script>
</head>
<body>
<div class="test t1">100% width relative <span></span></div>
<div class="test t2">100% width absolute <span></span></div>
<div class="test t3">100% width fixed bottom <span></span></div>
<style>
*
{
padding:0;
margin:0;
}
body{min-width:1300px;}
div{width:100%;}
div.t1{background:lime;}
div.t2{position:absolute;background:blue;}
div.t3{position:fixed;bottom:0;background:red;}
</style>
</body>
</html>