Помощь с устранением бага на iphone iOS 11 (6,7,X)
500 UAHПривет!
Этот баг замечен только на iPhone.
Для наглядности и проверки решений, я создал архив с версткой простой странички, где все могут узреть баг и попробовать свои варианты решений даной проблемы. Так же вы можете потестить и посмотреть на баг "вживую" по ссылке http://vova4.arturmoroz.com/
Также приложил видео с багом (в архиве с версткой).
Суть проблемы: есть 2 блока https://monosnap.com/file/0YcZvwOUZMqQV7QeUmmvcHKJ6Y4kga , верхний блок з скролом и нижний , они сделаны через flex, можете сделать через fixed либо absolute, не имеет значения, в нижнем есть textarea, когда на iphone нажимаешь на textarea, тогда появляется виртуальная клавиатура https://monosnap.com/file/RdYFugZq4zDQA9mbkHbqirQjyhQd70 , если начинаю скролить верхний блок, и при этом касаюсь нижнего блока, тогда нижний блок пропадает, тоесть начинает тоже скролится.
Нужно придумать решение, что бы нижний блок никогда не скролился, тоесть не пропадал с зоны видимости экрана.
На любые вопросы отвечу.
Предлагаю вариант сотрудничества, Вы решили даную проблему, пишите мне об этом, я заключаю с Вами сделку через сейф, проверяю все ли работает, и если все хорошо закрываю сделку.
эта проблема тестилась и на safari и на chrome, на iphone 7+ и iphone X, это проблема не только моего устройства
Приложения 1
-
1 день500 UAH
83 1 день500 UAH
Ну если высота нижнего блока не меняется, то да, можно и fixed:
.content {
padding: 20px;
overflow: auto;
background: #b3b3b3;
position: fixed;
left: 0;
top: 0;
… right: 0;
bottom: 86px;
}
.food {
padding: 20px;
background: #009a00;
position: fixed;
bottom: 0;
width: 100%;
}
wrapper не нужен
-
Задача честно говоря не самая простая. И одним css это не реализовать. До ios 10 это было значительно проще. iOS не считает, что видимая зона уменьшается. Нужно:
1.помощью JavaScript обсчитать размер окна,
2. получить window.pageYOffset после появления клавиатуры
3. Отнять от первого второе и полученный размер записывать в .wrapper css.
Если сейчас вручную поиграете с размером wrapper указав например 60%, то увидите, что textarea уже не будет скрошиться вниз.
Короче эта работа стоит больше чем 500грн 😉 -
Готов взяться за работу!
-
Вы сделайте, если получится, тогда пишите и заключим сделку, уже люди обожглись
-
Здравствуйте!
Отпишите мне, попробую сделать.
-
Отписую, пробуйте)
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Верстка 8 страниц сайта
4000 UAH
О проекте корпоративный сайт консалтинговой компании. Дизайн полностью готов в Figma (темно-синяя палитра, десктоп + мобильные версии). Нужна качественная адаптивная верстка строго по макетам. Анимаций нет.Объем работ Дизайнер предоставил десктопные и мобильные макеты для каждой… HTML и CSS верстка ∙ 1 час 4 минуты назад ∙ 45 ставок |
Верстка блоков WordPressДобрый день. Надо сделать редизайн, а конкретно верстку блоков как на макете, структура не сильно отличается от того что сделано сейчас кроме хеддера и hero блока. Надо сделать редизайн как мобильной так и десктоп версии. Сайт на ворд прессе, autoperformance.pl Дизайн в фигме. HTML и CSS верстка, Сопровождение сайтов ∙ 4 часа 36 минут назад ∙ 47 ставок |
Разработка сайта по ТЗ на FramerНеобходимо сделать сайт по этим параметрам, что в ТЗ https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Назовите реальный рейд на основе этого дизайна HTML и CSS верстка, Javascript и Typescript ∙ 5 часов 40 минут назад ∙ 18 ставок |
Посадочная страница для Shopify-магазина по готовому макетуНужно разработать landing page для интернет-магазина на Shopify. Магазин уже работает на купленной теме, поэтому задача — адаптировать готовый визуальный макет и структуру под возможности текущей темы, без полной разработки с нуля. Страница нужна под рекламный трафик из Facebook… CMS, HTML и CSS верстка ∙ 20 часов 20 минут назад ∙ 27 ставок |
Собрать страницу на Elementor ProНеобходимо собрать с нуля страницу на сайте WordPress на плагине Elementor (Pro-версия). Десктоп версия + адаптивная версия планшет и мобильный. Дизайн предоставляем в Figma. Шаблон документа дизайна — в приложениях (только десктоп версия). Необходимо будет использовать… HTML и CSS верстка, Веб-программирование ∙ 1 день назад ∙ 59 ставок |
Киев