iOS Chrome не соблюдает вставку безопасной области для надреза - PullRequest
1 голос
/ 30 апреля 2020

У меня проблема, когда альбомная версия Chrome добавляет пробел слева и справа от моего экрана.

Example of iOS Chrome notches

Здесь Вот спецификации:

Browser specs

У меня есть подход "кухонная раковина", где я попробовал все, чтобы удалить эти белые полосы и сделать фон полноэкранным.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

И следующие CSS:

html{
  margin: env(safe-area-inset);
  padding: env(safe-area-inset);
}


html, body, img{
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  width: 120vw;

}

img{
  margin: env(safe-area-inset);
  object-fit: cover;
}

Вот живая демонстрация, с которой можно поиграть:

https://codepen.io/EightArmsHQ/pen/JjYygPg

Я получаю хорошие результаты в iOS Safari , но, похоже, на этом все и заканчивается. Подобные проблемы были подняты env (safe-area-inset-top) не работает на Android P ie + WebView 69

Мне интересно, если это Chrome iOS ошибка, или если моя реализация неверна. Стоит отметить, что Safari удаляет , удаляя пробелы при добавлении этих свойств.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...