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 ;)

Answer 1

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.