Есть ли обходной путь, чтобы SFSafariViewController не скрывал заголовки фиксированной позиции? - PullRequest
Новая
       20

Есть ли обходной путь, чтобы SFSafariViewController не скрывал заголовки фиксированной позиции?

0 голосов
/ 17 октября 2018

SFSafariViewController содержит эту ошибку, которая не воспроизводится в Safari.

Регулярно он затеняет верх фиксированной панели за названием сайта / готовый хром.

Это происходит потому, что внутренне он теряет синхронизацию между фактической высотой страницы и размером хрома заголовка сжатия.

Хороший маленький заголовок

correct small header

Плохой маленький заголовок (SF хром должен быть маленьким, но он большой)

sad

Хороший большой заголовок

correct big header

Эта проблема была обнаружена в другом месте по адресу: https://meta.stackexchange.com/questions/279792/new-ios-chat-headers-occasionally-hide-behind-safari-navigation-controls-when-vi и является проблемой в iOS 9 и более поздних версиях (по-прежнему проблема в 12.0.1)

Чтобы воспроизвести, создайте пустое приложение с SFViewController и перейдите на сайт с фиксированным заголовком, например bbs.boingboing.netзатем нажмите вокруг и просмотрите несколько тем.

Поскольку этой ошибке уже пару лет, мне интересно, есть ли какой-нибудь обходной путь, который не включает добавление общего отступа к верхней части заголовка?

Минимальное воспроизведение

Создать страницу с этим HTML 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        height: 2000px;
        background-color: green;
      }
      header {
        width: 100%;
        height: 50px;
        background-color: red;
        color: white;
        position: fixed;
        top: 0;
      }
    </style>
  </head>
  <body>
    <header>Hello</header>
  </body>
</html>

Открыть в SafariViewController (разместить его где-нибудь в Интернете, а затем отправить ссылку, приложение gmail в iOS использует Safari View)Контроллер, приложение Discourse, а также)

Быстрая прокрутка вниз

Половина заголовка скрыта.

Вставки не имеют значения, вставка для top равна 0, свойство viewport покрытия не делает diff.

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

- Проблема

Тестирование в разных средах показывает, что проблема появляется только в SFSafariView и исходное приложение Safari не заражено.И это только появляется в iPhone с надписью в портретном режиме, когда пользователь обогащает конец страницы и прокручивает снова;Таким образом, страница должна подняться вверх, и панель навигации снова появится автоматически, и произойдет конфликт.

iPhone 8 iPhone 8 - Нижняя часть страницы - Портрет ( OK )

iPhone XR - Portrait iPhone XR - внизу страницы - Портрет ( НЕ ОК )

iPhone XR - Landscape iPhoneXR - внизу страницы - портрет ( OK )

iPad Pro 9.7 - Landscape iPad Pro 9.7 - внизу страницы - альбомная ( OK )

В некоторых случаях это может не быть ошибкой SFSafaryViewController.

  • Итак, если у вас есть доступ к фронтальным разработчикам сайта, который вы хотите встроить в SFSafaryViewController, представьте им следующее:

- Безопасная область Inset

Поэтому, чтобы решить эту проблему, Apple реализовала новый safe-area-inset , предварительно определенный набор из 4 констант и новую функцию CSS под названием constant().Предопределенные константы безопасной зоны: safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom и save-area-inset-left.Когда вы объединяете все четыре из этих констант, вы можете ссылаться на текущий размер вставки безопасной области с каждой стороны.constant() работает везде, где var() работает.

Существует множество сайтов, которые показывают, как перенести веб-страницу на iPhone X. Вот один из них .

Возможно, они могли бы попытаться поместить div вне прокручиваемой части и зафиксировать положение.Так что если у вас есть код, где он прокручивается: 

<div id="scroll-container">
  <div id="scrollable">
  </div>
<div>

Такой, где любой элемент в контейнере прокрутки div, он будет прокручивать.

Если они поместят его за пределы прокручиваемой части:

<div id="scroll-container">
<div>
<div id="not-scrollable">
</div>

и поставить position:fixed;или position:absolute;или position: sticky или device-fixed;или т. д. в CSS для #not-scrollable, он не должен прокручиваться.

  • Так что, если у вас нет доступа к внешним разработчикам изСайт, который вы хотите встроить в SFSafaryViewController, попробуйте следующее ( Не рекомендуется ):

    • Попробуйте включить barCollapsing safaryViewController.configuration.barCollapsingEnabled = false
    • или попробуйте встроить его в navigationController и избавиться от заголовка SFView
    • или использовать "Реализовать полный экран WKWebView с контроллером вместо SFSafaryViewController.

Примечание (для тех, кто возится с панелью инструментов)

  • Вы можете использовать методы делегата, чтобы определить состояние загрузки и загрузки веб-страницы и включить / отключить ее дляобойти ошибку инициализации макета страницы.(Вы также можете использовать ручную задержку)
  • Вы можете использовать частные API, чтобы скрыть или показать нижнюю панель инструментов.Но это не является предпочтительным, и он будет отклонен из Apple AppStore.
0 голосов
/ 20 октября 2018

Что если вы переопределите prefersStatusBarHidden, как показано ниже? 

override func prefersStatusBarHidden() -> Bool {
    return true
}

И вы можете добавить кнопку перезагрузки вручную :-(

...