У меня есть родной iOS приложение с WebView для отображения веб-контента. У меня есть фиксированный заголовок в мое приложение со следующими свойствами:
#header {
height: 60px;
background-color: @mainColor;
color: #ffffff;
padding: 10px;
text-align: center;
position: fixed;
width: 100%;
z-index: 1;
}
Прежде чем я повышен до iOS 11 все работало нормально. Теперь, когда я прокрутки вниз/вверх заголовка исчезает во время прокрутки, и когда свиток будет сделано, заголовок появляется снова.
Это также могут быть воспроизведены в Xcode 8.
Я'м просто пишу какой-то код, попробуйте по одному
самовывоз.automaticallyAdjustsScrollViewInsets = ложь
[собственн.объект WebView.представление ScrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentnever];
заголовок { высота: 60px; цвет фона: @главнаяцвет; цвет: #ffffff; обивка: значение 10px; текст-выровняйте: центр; должность: фиксированная; ширина: 100%; Z-индекса: 1; преобразование: translateZ(0); -МОЗ-преобразования: translatez(0); -МС-преобразования: translatez(0); -о-преобразования: translatez(0); -webkit-преобразования: translateZ(0); -в WebKit-шрифт-сглаживание: сглаженный; }
И некоторые полезные ссылки могут быть полезными для вас!
От Apple официальные Примечание:
важно:
начиная с iOS 8.0 и ОС Х 10.10, используйте WKWebView, чтобы добавить веб-контент для вашего приложения. Не использовать UIWebView или WebView.
Так что вы должны попробовать один раз с WKWebView
.
позиции: фиксированный` и Всегда был а Проблема с iOS. Кажется, что в каждой версии прошивкой проблема осталась. Теперь, я не мог'т найти ничего, что касается изменения поведения вашего приложения с iOS 10 до 11, вы могли бы рассмотреть об этом как об ошибке; с другой стороны, увидев толпы людей, которые сталкивались с этой проблемой и тем, что влияет больше или меньше все последние версии iOS, я бы предложил не использовать положение: "фиксированный".
Наиболее распространенным решением является преобразование: translateZ(0)
, это работает не только на iOS и предотвращения возможных мерцание, это также заставляет браузер, чтобы использовать аппаратное ускорение, чтобы получить доступ к процессору сделать пикселей лету. Он должен работать и без приставки -в WebKit-
из iOS 9.
У меня были очень похожие проблемы с Проект Cordova для iOS, которое использует WebView. Кордова использует UIWebView по умолчанию в качестве движка WebView и я попытался все возможные исправления, указанные в этой теме и многих других. Наконец наше единственное решение сменить движок браузера от UIWebView в WKWebView (https://developer.apple.com/documentation/webkit/wkwebview). С Cordova, представляя WKWebView довольно просто с плагином https://github.com/apache/cordova-plugin-wkwebview-engine
После введения WKWebView и решении некоторых вопросов она вызывает у нас больше не наблюдается мерцание или исчезновение фиксированное размещение элементов при прокрутке в iOS 11.
У нас была аналогичная проблема и она была исправлена с ниже 2 Плагины
https://github.com/apache/cordova-plugin-wkwebview-engine https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix
Первый плагин будет менять по умолчанию WebView для WKWebView и второй плагин обеспечивают исправление для CORS вопрос, который мы видим, для использования WKWebView.
Хитрость заключается в том, чтобы заставить GPU-ускорение. Сделать это путем добавления translate3d
к #элемент
.
transform: translate3d(0,0,0);
Если элементы вложены в элемент заголовок #
продолжают исчезать добавить translate3d к ним так же.
У меня был этот же вопрос с позиции:фиксированная и должность:липкий. Chaging из UIWebView в WKWebView установил его для меня:
#import <WebKit/WebKit.h>
....
@property (weak, nonatomic) IBOutlet WKWebView *myWebView;
на "начиная с iOS 8.0 и ОС Х 10.10, используйте WKWebView, чтобы добавить веб-контент для вашего приложения. Не использовать UIWebView или WebView.&и"
Возможно, вы уже видели этот пост на некоторые изменения в iOS 11, а если не может, оно будет относиться к вашей ситуации?
Одного просмотра-фит: содержат варианты/крышка/автоматический`?
Или изменения вашего кода, чтобы использовать константа
значение обивка-топ
?
Я боролся против этой же проблемой сам.
Вопрос (по крайней мере, проявляется в приложение, я работаю над этим) только, кажется, происходит на экранах, которые представляют собой сочетание высоких (в том, что они требуют много прокрутки), так и довольно сложных.
В целом, по крайней мере для меня, проблема только, кажется, действительно проявляться, когда плавная прокрутка ногами.
Хотя там'с одним экраном, в частности, который содержит 15 влево-вправо прокручивать ряды образов, которые будут ломать головы/нижний колонтитул не важно, как медленно прокручивается.
В свою защиту... у меня не было абсолютно ничего общего с дизайном. :-)
В любом случае...
После долгих поисков эксперемента, мне удалось придумать и "решение" из рода.
Заметь, я'м не утверждаю, что это способ пойти сюда. Но, возможно, кто-то с больше опыта, чем у меня в мобильном приложении космос, может принимать эту информацию и экстраполировать что-то менее паршиво от этого.
Первый кусок выглядит так:
html,
body {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: auto;
}
А затем в контейнер, который действует как основной части экрана:
.main-content-area {
overflow-y: auto;
height: 100%;
}
Это убьет плавная прокрутка для вашего приложения. Что не хорошо, я знаю. Но в результате ущемления пользователей'с возможностью прокрутки очень быстро, оказания экрана, кажется, быть в состоянии держать и проблема исчезнет.
Опять же, я'м не рекомендую это в качестве жизнеспособного решения для производства. Потому что он'ы, очевидно, не велика.
Я'м отель это скорее как шаг к реальному решению, в надежде, что это поможет.
===>>> обновление:
У меня есть рабочее решение. Но, как и другие до меня заметили, мне пришлось избегать использование фиксированного позиционирования.
Вместо этого, я использовал абсолютное позиционирование, чтобы определить заголовок, нижний колонтитул и основное содержание разделы страницы. Потом разрешили прокрутка только в основной раздел содержание.
Если это поможет, у меня Лок я собрал доступен на оба
Вы пытались использовать положение:липкий", а не "позицию: "фиксированный"?
В прошлом она работает очень хорошо на iOS. Пожалуйста, обратите внимание, что это положение:верхний липкий правилу требуемые, чтобы быть определенными.
Поэтому окончательное решение в вашем случае должно быть:
#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;
}
Кроме того, если вам необходимо дополнительное смещение сверху можно отрегулировать топе:0;` правило от нуля на любое число в пикселях.
И еще одно заключительное Примечание: это липкий элемент не извлечь элемент из потока документа и будет действовать как обычный документ элемент (как div с позиция:статические
или относительный
), но не нравится абсолютно позиционированных элементов (в случае "фиксированной" или "абсолютный").
это работает для меня
position: sticky