Исправленный заголовок исчезает при прокрутке веб-обозревателя в iOS 11

У меня есть собственное приложение для iOS с веб-просмотром для отображения веб-контента. У меня есть фиксированный заголовок в моем приложении со следующими свойствами:

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

Прежде чем я перешел на iOS 11, все работало нормально. Теперь, когда я прокручиваю вниз/вверх, заголовок исчезает во время прокрутки, и когда прокрутка завершена, заголовок появляется снова.

Это также можно воспроизвести в Xcode 8.

Ответ 1

Я просто пишу код, попробую по одному

Попробуйте ниже

self.automaticallyAdjustsScrollViewInsets = false

Попробуйте ниже

[self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];

Попробуйте ниже (измените свой код)

header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

И некоторые полезные ссылки могут быть полезны для вас!

http://ayogo.com/blog/ios11-viewport/
https://forums.developer.apple.com/thread/90472
Как исправить входной элемент iOS 11 в ошибке фиксированных модалов
https://github.com/PierBover/ios-iframe-fix
https://stanko.github.io/ios-safari-scoll-position-fixed/

Из официальной заметки Apple:

Важно:

Начиная с iOS 8.0 и OS X 10.10, используйте WKWebView для добавления веб-контента в ваше приложение. Не используйте UIWebView или WebView.

Итак, вы должны попробовать один раз с помощью WKWebView.

Ответ 2

position: fixed была всегда была проблема с прошивкой. Кажется, что в каждой версии iOS проблема сохраняется. Теперь я не смог найти ничего, касающегося изменения поведения вашего приложения с iOS 10 на 11, вы могли бы сообщить об этом как об ошибке; с другой стороны, увидев множество людей, столкнувшихся с этой проблемой, и тот факт, что это затрагивает более или менее все последние версии iOS, я бы предложил не использовать position: fixed.

Наиболее распространенным обходным решением является transform: translateZ(0), это не только работает на iOS и предотвращает любые возможные мерцания, но также заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору, чтобы пиксели летали. Он также должен работать без префикса -webkit- из iOS 9.

Ответ 3

У меня была очень похожая проблема с проектом Cordova, созданным для iOS, который использует веб-просмотр. Cordova по умолчанию использует UIWebView в качестве механизма веб-просмотра, и я перепробовал все возможные исправления, упомянутые в этой теме и многие другие. Наконец, нашим единственным решением было изменить механизм веб-просмотра с UIWebView на WKWebView (https://developer.apple.com/documentation/webkit/wkwebview). С Cordova представить WKWebView довольно просто с помощью плагина https://github.com/apache/cordova-plugin-wkwebview-engine.

После введения WKWebView и решения некоторых проблем, которые он вызывает, мы больше не испытываем мерцания или исчезновения элементов с фиксированным позиционированием при прокрутке в iOS 11.

Ответ 4

У нас была похожая проблема, и она была исправлена с помощью ниже 2 плагинов

https://github.com/apache/cordova-plugin-wkwebview-engine https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

Первый плагин изменит WebView по умолчанию на WKWebView, а второй плагин обеспечит исправление проблемы CORS, которую мы видим при использовании WKWebView.

Ответ 5

Трюк заключается в том, чтобы заставить ускорить GPU. Сделайте это, добавив translate3d к элементу #header.

transform: translate3d(0,0,0);

Если элементы, вложенные внутри элемента #header, продолжают исчезать, добавьте translate3d к ним.

Ответ 6

Фиксированная позиция не работает с iOS, но я использовал абсолютную позицию в своих приложениях cordova, которая никогда не вызывает никаких проблем для меня.

Ответ 7

Возможно, вы уже видели это сообщение на некоторые изменения в iOS 11, но, возможно, это применимо к вашей ситуации?

Один из параметров viewport-fit: contain/cover/auto?

Или измените свой код, чтобы использовать значение constant для padding-top?

Ответ 8

У меня была одна и та же проблема с обеими позициями: фиксированной и позицией: липкой. Переход от UIWebView к WKWebView исправил это для меня:

#import <WebKit/WebKit.h>

....

@property (weak, nonatomic) IBOutlet WKWebView *myWebView;

"Начиная с iOS 8.0 и OS X 10.10, используйте WKWebView для добавления веб-контента в ваше приложение. Не используйте UIWebView или WebView".

https://developer.apple.com/documentation/webkit/wkwebview

Ответ 9

Вы пытались использовать position:sticky вместо position:fixed?

В прошлом он отлично работает на iOS. Обратите внимание, что определено position:sticky правило top.

Итак, окончательное решение в вашем случае должно быть:

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1;
}

Также, если вам нужно дополнительное смещение сверху, вы можете настроить правило top:0; с нуля на любое число в px.

И еще одно последнее замечание: это липкий элемент, который не будет извлекать элемент из потока документов и будет действовать как обычный элемент документа (например, div с position:static или relative), но не как абсолютный позиционный элемент (в случае fixed или absolute).

http://caniuse.com/#feat=css-sticky

Ответ 10

Я сам боролся с этой самой проблемой.

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

Как правило, по крайней мере для меня проблема кажется, по-видимому, действительно проявляющейся при прохождении импульсной прокрутки.

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

В моей собственной защите... Я не имел абсолютно никакого отношения к дизайну.: -)

Во всяком случае...

После долгих поисков экспериментов мне удалось придумать "решение".

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

Первая часть выглядит следующим образом:

html,
body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
}

И затем для контейнера, который выступает в качестве основного тела вашего экрана:

.main-content-area {
    overflow-y: auto;
    height: 100%;
}

Это позволит убить прокрутку прокрутки для вашего приложения. Это не здорово, я знаю. Но в результате сокращения способности пользователя прокручиваться очень быстро, рендеринг экрана, похоже, способен идти в ногу и проблема исчезает.

Опять же, я не рекомендую это как жизнеспособное решение для производства. Потому что он явно невелик.

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

=== → > UPDATE:

У меня есть рабочее решение. Но, как указывали другие передо мной, мне пришлось избегать использования фиксированного позиционирования.

Вместо этого я использовал Absolute Positioning для определения разделов заголовка, нижнего колонтитула и основного содержимого страницы. Затем разрешено прокрутка только в разделе "Основной контент".

Если это помогает, у меня есть POC, который я собрал на BitBucket

Ответ 11

это работает для меня

position: sticky