Мобильная версияЯ работаю над следующим сайтом:
http://www.jpdgallery.com/
При нажатии на значок гамбургера в правом нижнем углу открывается контактная форма. В Chrome на моем MacBook поля ввода и текстовой области работают нормально — как в обычном, так и в мобильном представлении. Когда я развертываю это и тестирую на iPhone в Chrome и Safari в мобильном телефоне или Chrome, я не вижу текст во время набора текста. Я знаю, что он все еще печатает, потому что я получаю текст при отправке формы.
Поскольку я не могу выполнить репликацию в среде разработки, мне сложно понять, как устранить неполадки. Спасибо за любую помощь, которую вы можете оказать.
Я вставил HTML и весь CSS, который применяется к элементам ввода, извлеченным из представления инспектора Safari.
Атрибут стиля { } #first_3, #last_3, #input_4, #input_5 { размер шрифта: 1.3rem !важно; высота: 3,3 рем !важно; } #first_3, #last_3, #input_4, #input_5 { -webkit-внешний вид: нет; } кнопка, введите { переполнение: видимое; } кнопка, ввод, группа опций, выбор, текстовая область { маржа: 0; семейство шрифтов: наследовать; высота строки: наследовать; } html * { -webkit-font-smoothing: сглаживание; } *, ::после, ::перед { размер коробки: граница-коробка; } * { -webkit-user-select: нет; } * { заполнение: 0; } input, input:matches([type="password"], [type="search"]) { цвет: текст; цвет фона: -webkit-control-background; ширина верхней границы: 2 пикселя; ширина границы справа: 2 пикселя; ширина нижней границы: 2 пикселя; ширина левой границы: 2 пикселя; стиль границы-топа: вставка; стиль границы справа: вставка; стиль границы внизу: вставка; стиль границы слева: вставка; бордюр-топ-цвет: начальный; граница-правый-цвет: начальный; цвет нижней границы: начальный; цвет границы слева: начальный; источник-границы-изображения: начальный; граница-изображения-срез: начальный; ширина изображения границы: начальная; граница-изображения-начало: начальное; повторение границы-изображения: начальный; -webkit-rtl-ordering: логический; курсор: авто; } ввод, текстовая область, генератор ключей, выбор, кнопка { стиль шрифта: нормальный; вес шрифта: 400; шрифт-вариант-капс: нормальный; межбуквенный интервал: нормальный; межсловный интервал: нормальный; преобразование текста: нет; текстовый отступ: 0 пикселей; текстовая тень: нет; отображение: встроенный блок; выравнивание текста: начало; } ввод, текстовая область, генератор ключей, выбор, кнопка, счетчик, прогресс { режим письма: горизонтальный-TB; } ол, ул { стиль списка: нет; } html, тело, div, диапазон, апплет, объект, iframe, h1, h2, h3, h4, h5, h6, p, цитата, pre, a, abbr, акроним, адрес, большой, цитировать, код, del, dfn, em, img, ins, kbd, q, s, samp, small, страйк, сильный, суб, суп, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, форма, метка, легенда, таблица, подпись, tbody, tfoot, thead, tr, th, td, статья, в сторону, холст, детали, встроить, рисунок, figcaption, нижний колонтитул, заголовок, hgroup, меню, навигация, вывод, рубин, раздел, сводка, время, отметка, аудио, видео { маржа: 0; заполнение: 0; граница: 0; шрифт: наследовать; вертикальное выравнивание: базовая линия; } ул, меню, каталог { дисплей: блок; начало поля-блока: 1em; край-блок-конец: 1em; маржа-встроенное-начало: 0 пикселей; маржа-встроенный-конец: 0 пикселей; дополнение-inline-start: 40 пикселей; } .cd-nav .cd-navigation-wrapper { высота: 100%; переполнение-у: авто; отступ: 40 пикселей 5% 40 пикселей расчет (5% + 40 пикселей); -webkit-transform: TranslateZ(0); трансформировать: транслироватьZ(0); -webkit-backface-visibility: скрыто; -webkit-transform: TranslateX(-50%); преобразование: TranslateX (-50%); -webkit-transition: -webkit-transform 0,7 с; переход: преобразование 0,7 с; -webkit-переход-тайминг-функция: кубический-безье (0,86, 0,01, 0,77, 0,78); функция времени перехода: кубическое Безье (0,86, 0,01, 0,77, 0,78); } .navigation-is-open .cd-nav { видимость: видимая; -webkit-transition: видимость 0с 0с; переход: видимость 0с 0с; } .cd-nav { положение: фиксированное; z-индекс: 2000; верх: 0; слева: 0; высота: 100%; ширина: 100%; цвет фона: #243040; -webkit-transition: видимость 0 с 0,7 с; переход: видимость 0с 0,7с; } тело { маржа: 0; цвет фона: #fff; } тело { цвет фона: #ffffff; } HTML, тело, .container2 { ширина: 100% !важно; высота: 100%; /* максимальная высота: 100%; */ маржа: 0; заполнение: 0; } тело { цвет фона: белый дым !важно; ширина: 100%; маржа: 0; дисплей: гибкий; гибкое направление: столбец; выровнять-контент: центр; выровнять-элементы: по центру; гибкий: 0 1 авто; } :корень { --синий: #007bff; --индиго: #6610f2; --фиолетовый: #6f42c1; --розовый: #e83e8c; --красный: #dc3545; --оранжевый: #fd7e14; --желтый: #ffc107; --зеленый: #28a745; --бирюзовый: #20c997; --голубой: #17a2b8; --белый: #fff; --серый: #6c757d; --серо-темный: #343a40; --первичный: #007bff; --вторичный: #6c757d; --успех: #28a745; --информация: #17a2b8; --предупреждение: #ffc107; --опасность: #dc3545; --light: #f8f9fa; --темный: #343a40; --breakpoint-xs: 0; --breakpoint-sm: 576 пикселей; --breakpoint-md: 768 пикселей; --breakpoint-lg: 992px; --breakpoint-xl: 1200 пикселей; --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji" ","Символ пользовательского интерфейса Segoe","Noto Color Emoji"; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: прозрачный; } html { дисплей: блок; } *, ::после, ::перед { размер коробки: граница-коробка; } *, ::после, ::перед { размер коробки: граница-коробка; Контактная информация/Форма запроса
- Имя
- Фамилия
- Электронная почта
- Примечание ОТПРАВИТЬ
- [url=mailto:info@jpdconcepts.com]info@[domain].com[/url]
- [555]-[555]-9211 ВермонтСША
