VisualViewport API ниже iOS 13

Здравствуйте,

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

На устройствах Android с браузером это не является проблемой, так как элементы с позиционированием fixed автоматически сдвигаются вверх до верхней границы визуальной клавиатуры при её появлении.

Обходное решение для iOS — использовать Visual Viewport API https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API. Единственная проблема в том, что оно не поддерживается на устройствах с версией iOS ранее 13.

Я протестировал это же поле ввода на устройстве с iOS 12.1, и, по-видимому, Discourse сумел воспроизвести желаемое поведение даже на неподдерживаемых версиях Safari для iOS.

Не могли бы вы подсказать, в каком направлении двигаться, чтобы добиться аналогичного результата? Буду очень признателен :smiley:

С уважением,
Ваутер Вермерш

Я помню, как @sam называл это «горой хаков». Не уверен, что вам стоит туда лезть..

2 лайка

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

Мне уже пришлось применить отвратительный хак, чтобы предотвратить поднятие верхней фиксированной панели в мобильном Safari при фокусировке на поле ввода. На самом деле, думаю, это будет не намного хуже того, что мне пришлось сделать, чтобы это реализовать :stuck_out_tongue_closed_eyes:

2 лайка

Ужасный хакинг заключался в том, чтобы вырывать элементы из фиксированного положения при фокусе на текстовом поле и скрывать всё на странице. Затем возвращать их обратно при потере фокуса текстовым полем.

Это было очень причудливо. Очень рад, что @pmusaraj представил гораздо более надежную реализацию.

5 лайков

Соответствующий код для обоих решений находится здесь: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js

Как отмечено в этом файле, мы вскоре уберём хаки для iOS 12. В этом году вышла iOS 14, и только около 5% устройств всё ещё работают на iOS 12.

4 лайка

Спасибо, что поделились! :smiley:

Я быстро посмотрел на ваш обходной путь — похоже, вы выбрали вариант с жестким заданием размеров для всех возможных вариантов клавиатур?

Однако, когда автоподсказка отключается, размер клавиатуры меняется. Как вы справляетесь с этим?

Не знал, что аудитория, использующая iOS 12, настолько мала. Вы уверены, что осталось только 5% пользователей с iOS 12 и ниже? В таком случае, возможно, зря тратить время на решение именно этой проблемы.

Я проверил на iPhone 6 с iOS 2.14.

Обходное решение работает отлично, когда автоподсказка включена… когда автоподсказка отключена, у нас остаётся пробел… но, как вы уже отметили, количество пользователей, всё ещё застрявших на iOS 12, очень мало… Ещё меньше тех, кто застрял на iOS 12 в сочетании с отключённой автоподсказкой.

Так что ваше исправление — лучшее, что я могу представить. Спасибо за分享! :wink:

Не знаю, есть ли официальные данные, но этот график от Mixpanel показывает, что доля iOS 12 и более ранних версий составляет 7%.

Я полностью согласен, что не стоит прилагать усилия для исправления этой проблемы на iOS 12.

3 лайка