делает глубокий вдох
Хорошо, у меня есть большой div, который действует как фоновый слой. Этот блок перемещается слева направо на основе ссылки, выбранной в типичной горизонтальной навигации. Это немного новшество.
Структура HTML:
<div id="scroll">
<div class="container_16">
<div id="header" class="grid_9 suffix_3 alpha omega">
<!-- the links that control animation -->
<ul>
<li><a href="example link">Example 1</a></li>
<li><a href="example link">Example 2</a></li>
</ul>
</div> <!-- end #header --> <div class="main grid_8 alpha omega">
<div class="content grid_12 alpha">
<div id="the_content">
<!-- content is loaded in here via ajax -->
</div><!-- end the_content -->
</div><!-- end .content -->
<div class="clear"></div>
<div id="footer">
Footer stuff
</div>
</div> <!-- end .main .grid_8 .alpha .omega -->
</div> <!-- end .container_16 -->
</div> <!-- end scroll -->
Краткий фрагмент CSS:
#background_container {
position: absolute;
left: 0px;
top: 0px;
z-index: -1000;
width: 100%;
height: 100%;
}
#scroll {
width: 100%;
height: 100%;
overflow: auto;
}
Javascript просто использует jQuery для анимации «левого» атрибута. Я бы включил это, но многое происходит, и я не думаю, что это поможет найти решение.
По сути, когда фоновый div прокручивается от первой позиции к последней позиции, содержимое в Safari, по-видимому, кратковременно «скручивается».
Видео этого поведения:
[Отредактированный]
В видео я демонстрирую как сафари, так и firefox. Как вы можете видеть, в Safari во время анимации происходит сжатие / сбои содержимого. В Firefox это не так. Safari, похоже, единственный браузер, который делает это. Это даже работает в IE6. :)
Div, который выглядит как "scrunch", кажется, <div id="header" class="grid_9 suffix_3 alpha omega">, но иногда вы можете кратко увидеть полосу прокрутки, которая предполагает, что <div id="scroll"> может быть основной причиной.
Это проблема рендеринга Safari, которая является распространенной и ее можно избежать? Или мне просто смириться с этим?
Заранее спасибо!