jQuery CSS style only applying to first element on iOS

I have a very simple script to make sure full width banner images are always centered and responsive.

<script>

    $(document).ready(function () {
        var conHeight = $(window).width();
        var imgHeight = $(".banner_image img").width();
        var gap = (imgHeight - conHeight) / 2;
        $(".banner_image img").css('left', -gap);
    });


</script>

I have multiple instances of the class, .banner_image with one full width banner image inside the class.

I’ve tried it with and without a document.ready function. It works on all screen sizes for all images on desktop, but on Safari for iOS it only centers the first image.

I read a few things about a bug in iOS 8 that can cause only the first .each() child to work, but I made sure i have the latest jQuery which is supposed to fix this bug (2.1.4, 1.11.3 I think)

How can I get all images to center when viewing it on the iPhone?

CSS:

.banner_image {
    text-align: center;
    position: relative;
    min-height: 500px;
    overflow: hidden;
    display: block;
}
.banner_image img {
    min-height: 100%;
}

.banner_image img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    min-width: 100%;
}


Source: cross-browser

Leave a Reply