cssweb-applicationstwitter-bootstrap-3ios9iphone-standalone-web-app

Css rules ignored


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


Solution

  • 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.