Абсолютно позиционированные плавающие заголовки Jitter в Safari

У меня есть простой JSFiddle одного плавающего заголовка здесь:

http://jsfiddle.net/zT9KQ/

В основном это использует translate3d для запуска в графическом процессоре, а аппаратное ускорение плавающего заголовка, чтобы его можно было сделать более плавно. Заголовок вздрагивает в последнем Safari, но в последних браузерах Chrome, FF и Opera получается отлично. Фактический код, на который это влияет (код, который подстегнул этот вопрос), - это код, который я написал, который нельзя публиковать публично, но работает аналогичным образом, когда позиционирование fixed, к сожалению, не является допустимым решением.

Я пробовал:

• Установка свойства backface-visibility CSS в none.
• Установка свойства perspective CSS в 1000.
• Игра с requestAnimationFrame во время логики анимации.
• Дросселирование обратного вызова события прокрутки.
• Настройка преобразования translateZ на нечто большее, чем 0px.

Но ничто из этого не сработало (или, по крайней мере, кажется разумным предположить, что GPU зашел, но дрожание сохраняется). Я заметил, что два вопроса уже открыты, которые идентичны тому, который я поднимаю, но никто не ответил на них:

• Дрожание в Sticky Header в Safari
• Реализация фиксированной позиции в javascript вызывает дрожание в Safari при прокрутке

Это известная ошибка? Есть ли отверстие для производительности, которое я не запечатываю?

ИЗМЕНИТЬ

Я получаю много вопросов относительно того, почему position: fixed не является допустимым вариантом. Чтобы прямо ответить Антонию на сам вопрос:

Я не эмулирую/не изобретаю position: fixed. Если вы посмотрите на ответ на верхний голос (на этот комментарий), вы увидите, что это, похоже, проблема Safari. Причиной position: fixed является нежелательным в этом случае, потому что данный код должен поддерживать несколько плавающих заголовков, которые расположены ниже друг друга и имеют "контейнерный" диапазон, где могут быть бесконечно вложенные контейнеры. Использование фиксированного позиционирования не только делает код более сложным в случае, когда эти плавающие заголовки живут в контейнере, который горизонтально прокручивается, но также делает компонент более хрупким в целом (вычисление смещений, когда виджет должен находиться в другом контейнере в другом месте страницы), Итак, семантически, позиционирование absolute соответствует моим потребностям лучше, чем fixed.

SECOND EDIT

Подумав о том, что Энтони рассказывал мне (чтобы я мог изобретать колесо), и, услышав о -wekbit-sticky от пользователя3716477, я хотел бы обновить вопрос, чтобы показать, что я пытаюсь сделать. Вы можете видеть, как работает мой код в каждом браузере, кроме Safari:

http://cl.ly/3y1i3C473G2G

Я узнал:

• Вы не можете полагаться на scroll или действительно на любые подобные прокрутки события (например, mousewheel), так как они асинхронны по своей природе. Я отправил Apple ошибку, подробно изложив, что происходит, и по этой причине они закрыли ошибку.
• В настоящее время нет реального способа делать то, что я хочу, - иметь несколько плавающих заголовков, которые складывают и заменяют друг друга. Думаю, мне придется ждать чего-то вроде -webkit-sticky, чтобы выйти.
• Я должен включать всю соответствующую информацию в SO-вопросы отсюда. -Р

Спасибо, что сыграли парней! Вот точный ответ, который я получил от Apple:

Отношения с разработчиками Apple09-Jun-2014 13:16

Инжиниринг определил, что не планируется на основе следующего:

В коде используются события прокрутки, которые являются асинхронными.

Теперь мы закрываем этот отчет об ошибке.

Если у вас есть вопросы относительно разрешения этой проблемы, пожалуйста, обновите свой отчет об ошибке с помощью этой информации.

Пожалуйста, регулярно проверяйте новые выпуски Apple для любых обновлений что может повлиять на эту проблему.

Ответы

$scrollContainer.on('scroll mousewheel', function () {
    // reinvent the wheel here
});

$(function () {
    var $header = $('h1'),
        $container = $('.container'),
        $scrollContainer = $('.scroll-container'),
        scrollContainerOffset = $scrollContainer.offset().top;
    $scrollContainer.on('scroll', function () {
        var top = Math.max(0, $container.offset().top * -1 + scrollContainerOffset);
        $header.css('top', top + 'px');

    });
});

<div>
<h1>Header</h1>
    <div class="container">
        <div class="content"></div>
    </div>
</div>

.container {
    height: 300px;
    position: relative;
    overflow-y:scroll;
}
.content {
    height:1000px;
}
h1 {
    position: relative;
    top:0px;
    left:0px;
    margin: 0;
    width: 100%;
    background: black;
    color: white;
}