Css rules ignored

Question

Since upgrading to iOS 9, my web application has changed behaviour and now shows all content with css style display: none and visibility: hidden. This "feature" is seen in both Safari and Chrome for iOS. The same content is hidden (as expected) in Chrome, Firefox, Safari and IE for Windows and on Android phones. The problem seems related to iOS but I could not find any information about it.

I know there is a media query bug for iOS 9 (described here and here) but I neither have problems with the responsiveness of the page nor the zoom.

Also worth noting I am using Twitter Bootstrap 3 and it's specifically their hidden classes which are not working properly in iOS.

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

Why is the content not hiding?

Update

I have made a fiddle for testing. It contains two hidden objects, but in this simplified version only one of them fails. I expected both to fail like in my real scenario, but you can't get everything you want ;)

can you create a fiddle or add a code snippet that will reproduce the problem you have?? — wf4, Nov 10 '15 at 23:03
`hidden-xs` means it will be hidden on small devices(<768px) only, are you sure the device you are trying out is less than 768px in width? Perhaps you need `hidden-md` for it to be hidden on your device? I have no iOS9 to test my theory, but you could test it out. If that doesn't work, there are [many other hide/show classes available](http://getbootstrap.com/css/#responsive-utilities-classes) — turbopipp, Nov 15 '15 at 16:30
@turbopipp yes I'm sure. I have also tested with `hidden` and the same bug applies to the scenario. — Nurp, Nov 16 '15 at 07:55
[this link](https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/) might help you out. And if all else fails, use opacity: 0 and position:absolute toggle? :) — turbopipp, Nov 16 '15 at 08:44
@turbopipp Thank you, I will take a look :) There are lot of workarounds but it disturbs me iOS 9 can't handle obvious things like this! — Nurp, Nov 16 '15 at 09:33

score 2 · Answer 1 · edited Feb 23 '16 at 21:48

I guess it is related width the bug often reported about IOS9 that might look like Safari is not taking in right account the media-queries.

A possible workaround might be, fixing or adding those values in the meta viewport:

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

Do not set the page width in the meta-viewport! This will just cause more problems.

all in all in this way:

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

if it works, you may set a javascript just to add a specific meta viewport for IOS9 webkit only.

This solves the bug with media queries, but not the bug I am struggling with :/ — Nurp, Nov 16 '15 at 08:32

score 0 · Accepted Answer · answered Jul 10 '19 at 15:20

It is long ago since this question was raised, and sadly I don't remember the exact solution. I had to leave the project and get back to it a few months later.

I remember it being related to some strange behavior with Bootstrap 3 in my project, thus no iOS bug. I will change the title of the question to better reflect this.

Css rules ignored

2 Answers2