Правила CSS игнорируются

После обновления до iOS 9 мое веб-приложение изменило поведение и теперь отображает весь контент в стиле CSS display: none и visibility: hidden. Эта «функция» присутствует как в Safari, так и в Chrome для iOS. Один и тот же контент скрыт (как и ожидалось) в Chrome, Firefox, Safari и IE для Windows и на телефонах Android. Проблема кажется связанной с iOS, но я не смог найти никакой информации об этом.

Я знаю, что в iOS 9 существует ошибка медиазапроса (описана здесь и здесь), но у меня нет проблем с отзывчивостью страницу, ни масштаб.

Также стоит отметить, что я использую Twitter Bootstrap 3, и именно их скрытые классы не работают должным образом в iOS.

<div class="hidden">Hide me please</div>

Почему контент не скрывается?

Обновить

Я сделал скрипку для тестирования. Он содержит два скрытых объекта, но в этой упрощенной версии не работает только один из них. Я ожидал, что оба потерпят неудачу, как в моем реальном сценарии, но вы не можете получить все, что хотите;)


ios9 web-applications css twitter-bootstrap-3 iphone-standalone-web-app
person Nurp    schedule 03.11.2015    source источник
comment
Вы можете создать скрипку или добавить фрагмент кода, который воспроизведет вашу проблему ??   -  person wf4    schedule 11.11.2015
comment
@ wf4 конечно, я добавил это к вопросу   -  person Nurp    schedule 11.11.2015
comment
hidden-xs означает, что он будет скрыт только на небольших устройствах (‹768px). Вы уверены, что ширина устройства, которое вы пробуете, меньше 768px? Возможно, вам нужно hidden-md, чтобы он был скрыт на вашем устройстве? У меня нет iOS9, чтобы проверить мою теорию, но вы можете это проверить. Если это не сработает, есть множество других доступных классов скрытия/отображения   -  person turbopipp    schedule 15.11.2015
comment
@turbopipp да, я уверен. Я также тестировал с hidden, и та же ошибка относится к сценарию.   -  person Nurp    schedule 16.11.2015
comment
эта ссылка может вам помочь вне. И если ничего не помогает, используйте opacity: 0 и position: absolute toggle? :)   -  person turbopipp    schedule 16.11.2015
comment
@turbopipp Спасибо, я посмотрю :) Есть много обходных путей, но меня беспокоит, что iOS 9 не может справиться с такими очевидными вещами!   -  person Nurp    schedule 16.11.2015

Ответы (2)


arrow_upward
2
arrow_downward

Я предполагаю, что это связано с ошибкой, часто сообщаемой о IOS9, которая может выглядеть так, как будто Safari неправильно учитывает медиа-запросы.

Возможным обходным решением может быть исправление или добавление этих значений в meta viewport:

initial-scale=1.0001
minimum-scale=1.0001
maximum-scale=1.0001
user-scalable=no

Не устанавливайте ширину страницы в мета-вьюпорте! Это только вызовет больше проблем.

вообщем вот так:

<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>

если это работает, вы можете установить javascript только для добавления определенного meta viewport только для веб-сайта IOS9.

person holden    schedule 11.11.2015
comment
Это решает ошибку с медиа-запросами, но не ту ошибку, с которой я борюсь:/ - person Nurp; 16.11.2015

arrow_upward
0
arrow_downward

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

Я помню, что это было связано с каким-то странным поведением Bootstrap 3 в моем проекте, поэтому нет ошибки iOS. Я изменю название вопроса, чтобы лучше отразить это.

person Nurp    schedule 10.07.2019