css rules doesn't work properly on iOS9

Question

i have a problem with iOS9 about site's css. css rules works fine on android and iOS8. but on iOS9, site messed up. this is the difference ios8 and ios9.

What is the possible problem and how can i fix this? Thanks for help.

css:

section.destinations {
    float: left;
    width: 82.5%;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    font-weight: 300;
    font-size: 1.25em;
}
.content-wrap {
    position: relative;
    border-radius: 5px;
}
.content-wrap section {
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
    display: block;
}
.destinations .promo {
    position: relative;
    background: #fff;
    webkit-box-shadow: 0 0 2px rgba(0,0,0,1);
    -moz-box-shadow: 0 0 2px rgba(0,0,0,1);
    box-shadow: 0 0 2px rgba(0,0,0,1);
    float: left;
    width: 23%;
    margin: 0 2.6% 20px 0;
    font-size: 10px;
    text-align: left;
    display: block;
}
@media screen and (max-width: 600px){
    section.destinations {
        width: 100%;
    }
}
@media screen and (max-width: 410px){
    .full .one-fourth {
        width: 100%!important;
        margin: 0 auto 15px!important;
     }
}

HTML:

<section class="destinations clearfix full tabs tabs-style-tzoid">
    <div class="content-wrap">
        <section id="section-tzoid-1" class="content-current">
           <!--column-->
            <article class="one-fourth promo" style="">

            </article>
            <!--//column-->
           <!--column-->
            <article class="one-fourth promo" style="">

            </article>
            <!--//column-->
            <div class="clearfix"></div>
        </section>
    </div>
</section>

Answer 1

You've stumbled on the one of the cardinal problems for IOS9 in a web environment. IOS9 does not honor any media queries.

if your classes live in a media query for a specific screen size, they won't be read and your css, your output will look the same on all devices as it currently does in IOS9. The issue has been reported but apple currently has not released a schedule for an updated version to resolve this.

In my site, ive posted an alert in a display: none; with a media query of less than 1920 px class that will only be displayed on ios9 devices and only until the problem is resolved.

/* Device Alert (all screen, < 1920px only)*/
@media screen and (max-width: 1920px) {

<style>
.alert {
display:none;
}
</style>
}

<div class="alert">
IOS9 has caused display issues with this site. Please access the site on another platform until an update is issued.
</div>

Basically, if the media query is excepted, display:none;. If the media query is not excepted, display the alert.

Hope this helps for now.