Почему IOS игнорирует часть CSS?

Question

[Sarkis Arutiunian]

Добрый день!
Потратил почти два дня, не могу разобраться с одной проблемой, возможно для многих решение элементарно, но я новичок который только месяц назад начал изучать web_dev.

Собственно верстаю черновой шаблон для сайта, черновик экрана доступен по ссылке: usagid.com/pages/hotel/hotel.html
Шаблон для мобильных устройств по этому сделайте окно браузера поуже.

Если открыть ссылку на ПК и на ios устройстве разница заметна сразу!:
- на ios другое отображение шрифтов
- не работает паралакс эффект который сделан самым простым способом через css
- в блоках type="text" ни как не получается убрать тени и прочее что бы привести к тому же виду как и на ПК.

Answer 1

[Кирилл]

1. Шрифт 'Source Sans Pro' у вас без кириллицы, то есть все русские символы отображаются стандартным шрифтом. В винде это Ариал, в айос наверное хельветика.
2. Параллакс не только на айос не будет работать, а еще много где caniuse.com/#feat=background-attachment
Можно просто блок с бэкграундом засунуть вниз и задать блоку position fixed, на пример.
3. Для инпутов пропишите сначала это, что уберет стандартную стилизацию:

-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

Comments

[Sarkis Arutiunian]

Спасибо очень помогли! код указаный вами ниже (что бы убрать стилизацию) всегда нужна указывать отдельно для каждого вида движка браузера? нет общей команды? или ее самому стоит писать через скажем less или sass?

Кстати вариант с position fixed, почему то то же не смог корректно сделать, может руки пока кривоваты, но все время слой в не понятно порядке перекрывает часть элементов, даже z-index не смог мне помочь)

[Кирилл]

Sarkis Arutiunian: appearance: none в основном для инпутов указывается, именно они плохо стилизуются в айос. Думаю, у вас не так много таких элементов будет на странице, так что просто ручками для нужных элементов стили прописать не трудно будет. А по поводу positon fixed попробуй задать отрицательный z-index -1