Mac OS X WebKit и позиция CSS: исправлена ​​прокрутка

Question

Мы столкнулись с проблемой оптимизации при использовании WebKit в Mac OS X, и надеемся, что кто-нибудь нам поможет.

Мы написали приложение Cocoa для Mac OS X, которое по сути управляет одним веб-представлением, которое указывает на наш онлайн-сайт. Все работает нормально по большей части. Однако наш веб-сайт использует позицию CSS: исправлено, чтобы держать тонкую «полосу заголовка» заблокированной в верхней части WebView, аналогично большой оранжевой панели «Добро пожаловать» в верхней части StackOverflow.com. Мы определили, что с помощью position: fixed active, прокрутка WebView заставляет всю веб-страницу перерисовываться, что вызывает мучительную медленную прокрутку. С положением: зафиксировано отключено, прокрутка очень быстрая и плавная; необходимо нарисовать только элементы страницы, которые прокручиваются «в поле зрения».

Мы знаем, что это не ошибка в коде нашего приложения Какао и не проблема с нашим кодом HTML / CSS. Такая же медленная прокрутка происходит с использованием тестового кода WebKit от Apple. Мы можем указать тестовый код Apple на http://www.StackOverflow.com в качестве теста, и мы видим точно такое же поведение. Также есть тестовая страница в базе данных ошибок Mozilla, которую мы использовали для проверки проблемы (https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911). Странно то, что некоторые браузеры на Mac с WebKit (например, Safari и Chrome) не имеют этой проблемы ; прокрутка всегда быстрая на страницах с использованием позиции CSS: исправлено в этих двух браузерах.

Кто-нибудь еще испытывал эту проблему с WebKit на OS X? Если так, что мы можем сделать, чтобы ускорить нашу прокрутку? Благодаря.

Answer 1

У меня была похожая проблема: фиксированная полоска мерцала, когда я прокручивал страницу.Поэтому я заставил WebView использовать слои и исправил

    [w setWantsLayer:YES];

Answer 2

У меня была похожая проблема в моем приложении Mac на основе веб-браузера. Он имеет верхний и нижний колонтитулы с позиции: фиксированное свойство css Последний веб-комплект, поставляемый с 10.10.x и выше, не страдает от этой проблемы. Это происходит в webkit для mavericks (10.9.x). Я получил его, установив эти свойства для веб-просмотра

    [self.webView setWantsLayer:YES];
    [self.webView setCanDrawSubviewsIntoLayer:YES];

Answer 3

Я мог бы быть далеко отсюда, так как я не уверен, применимо ли то же самое в вашем веб-представлении, но может помочь использование стиля, который навязывает навигацию на свой собственный слой.

Что-то вроде translateZ (0) или translate3d (0,0,0,).Я сталкивался с похожими проблемами при сборке с PhoneGap, и применение некоторых идей к наслоению действительно помогло.

Я считаю, что браузер может использовать аппаратное ускорение, когда задействовано третье измерение.