iOS mobile not showing some images from my site-CodePudding

I've an issue specific to iOS phones, or so it seems to me.

I support a site autumna.co.uk. Everything is fine except when running from an iOS phone (I don't know about iPad) the search images buttons on the home page are not showing (they show about 1 in 20 refreshes). The browser on the iPhone makes no difference (I've tried safari, chrome and firefox). They work on an android phone, on a PC through the browser (including MacBook).

The images are initially hidden and JS will display those that should be shown. They should all be shown on the home page.

Is there anything specific about the iPhone I need to account for causing the images to not show.

The relevant section of html is below:

 <div class="row search-service-type-btns" style="display: flex;">
    <script>
        var initial_service_type = ""
        var is_brand = false
    </script>
    
        <div >
            <input type="radio" id="radioCareHome" name="service_type" value="service_care_home" checked="">
            <label for="radioCareHome"><img  src="https://cdn.autumna.co.uk/prod/static/img/search/care-homes-selector-box.07a043b18e60.png" alt="Care Homes"></label>
        </div>

        <div >
            <input type="radio" id="radioHomeCare" name="service_type" value="service_home_care">
            <label for="radioHomeCare"><img  src="https://cdn.autumna.co.uk/prod/static/img/search/home-care-selector-box.79290d9e4862.png" alt="Home Care"></label>
        </div>

        <div >
            <input type="radio" id="radioLiveInCare" name="service_type" value="service_live_in_care">
            <label for="radioLiveInCare"><img  src="https://cdn.autumna.co.uk/prod/static/img/search/live-in-care-selector-box.ee30e9164992.png" alt="LiveIn Care"></label> 
        </div>

        <div >
            <input type="radio" id="radioRetirementVillage" name="service_type" value="service_retirement_village">
            <label for="radioRetirementVillage"><img  src="https://cdn.autumna.co.uk/prod/static/img/search/retirement-living-selector-box.abf50719d5ee.png" alt="Retirement Living"></label> 
        </div>
    
</div>

<div  id="search-tabs" style="background-color: rgb(38, 79, 84);">    
    <div  id="myTabContent">
        <div  id="home" role="tabpanel" aria-labelledby="home-tab">
            <div >
                <div >
                    <div >
                        <input  type="text" name="search" maxlength="128" title="Search" placeholder="Enter Location or Postcode" required="" id="id_location_search" value="" itemprop="query-input">
                    </div>
                    <div  id="location-search-autocomplete-results"></div>
                </div>

                <div >
                    <button type="submit" >Search</button>
                </div>
            </div>
        </div>
        <div  id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div >
                <div >
                    <div >
                        <input  type="text" name="organisation_search" maxlength="128" title="Search" placeholder="Enter Service or Provider name" id="id_search">
                    </div>
                    <div  id="search-autocomplete-results"></div>
                </div>
            </div>
        </div>
    </div>
    <ul  id="myTab" role="tablist" style="display: flex;">
        <li >
            <a  id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="background-color: rgb(38, 79, 84); border-color: rgb(38, 79, 84);">Search by Location</a>
        </li>
        <li >
            <a  id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Search by Service or Provider name</a>
        </li>
    </ul>
</div>
<div id="other_service"  style="display: none;">
    <div >
        <div >
            <div style="text-align: left">
                <p >
                    <strong>
                        Not sure what you need?
                    </strong>
                </p>
                <p>
                    We know it's an emotional, confusing and costly decision to make.  We can help you make an informed decision and the best choices.
                </p>
            </div>
        </div>
        <div >
            <a href="/free-advice-lines/care-advice" >Find out</a>
        </div>
    </div>
</div>
<div id="not_sure_div"  style="display: block;">
    <input type="radio" id="radioOther" name="service_type"  value="service_other" style="display:none">
    <label  for="radioOther"><img  src="https://cdn.autumna.co.uk/prod/static/img/not-sure-icon.c8f114c682bb.png" style="display:initial"> Not Sure what care you need?</label> 
    <!--<a href="/search/safe" style="color:white">Safe Badge</a>-->
</div>

Ad the js

'use strict';

var searchBoxColor = '#264F54'
var inactiveColor = '#cccccc'

function change_care_type (obj) {
    if (obj == "service_home_care") {
        searchBoxColor = '#1FA18F'
        $('#search-tabs').show()
        $('#other_service').hide()
    } 
    else if (obj == "service_live_in_care") {
        searchBoxColor = '#FFC700'
        $('#search-tabs').show()
        $('#other_service').hide()
    }
    else if (obj == "service_retirement_village") {
        searchBoxColor = '#ABB5B5'
        $('#search-tabs').show()
        $('#other_service').hide()
    }
    else if (obj == "service_other") {
        searchBoxColor = '#ABB5B5'
        $('#other_service').show()
        $('#search-tabs').hide()
    }
    else {
        searchBoxColor = '#264F54'
        $('#search-tabs').show()
        $('#other_service').hide()
    }
    $('#search-tabs').css('background-color', searchBoxColor)
    $('.nav-link.active.search-by').css('background-color',searchBoxColor)
    $('.nav-link.active.search-by').css('border-color',searchBoxColor)        
}

$('.nav-link.search-by').click(function (){
    if (! $(this).hasClass('active')) {
        $('.nav-link.search-by').css('background-color', searchBoxColor)
        $('.nav-link.search-by').css('border-color', searchBoxColor)
        $('#search-tabs').css('background-color', searchBoxColor)
        $('.nav-link.active.search-by').css('background-color',inactiveColor)
        $('.nav-link.active.search-by').css('border-color',inactiveColor)
    }
})

$("input[name='service_type']").change(function(){
    change_care_type($(this).val());
});

$(document).ready(function () {
    change_care_type(initial_service_type);
    if (window.location.pathname == '/' ){
        // Not home page
        $('.search-service-type-btns').css('display','flex')
        $('.not-sure-div').css('display','block')
    }
    if (!is_brand) {
        $('#myTab').css('display','flex')
    } else {
        //$('.search-service-type-btns').css('display','flex')
        $('#search-tabs').css('background-color', inactiveColor)
    }
})


// Get the header
var header = document.getElementById("filter-container");
// Get the offset position of the navbar
var sticky = 660;
// When the user scrolls the page, execute myFunction
$(function(){
    $(window).scroll(function() {
        try {
            if (window.pageYOffset > sticky) {
                header.classList.add("sticky");
            } else {
               header.classList.remove("sticky");
            }
        }
        catch (err){
        }
    });
});

CodePudding user response：

Your CSS does enable search buttons on screen that have width < 768px and by default :

.search-service-type-btns {
    display: none;
}

The display is not none only if screen is bigger that 768. You can test by :

load page on iPhone vertical screen -> only one search button
load page on iPhone horizontal screen -> all search buttons

You must look at the media specific definitions like :

@media only screen and (min-width: 576px) and (max-width :1366px)

and add one for smaller widths