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 class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioCareHome" name="service_type" value="service_care_home" checked="">
<label for="radioCareHome"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/care-homes-selector-box.07a043b18e60.png" alt="Care Homes"></label>
</div>
<div class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioHomeCare" name="service_type" value="service_home_care">
<label for="radioHomeCare"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/home-care-selector-box.79290d9e4862.png" alt="Home Care"></label>
</div>
<div class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioLiveInCare" name="service_type" value="service_live_in_care">
<label for="radioLiveInCare"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/live-in-care-selector-box.ee30e9164992.png" alt="LiveIn Care"></label>
</div>
<div class="col-6 col-md-3 d-flex form-group radio-toolbar">
<input type="radio" id="radioRetirementVillage" name="service_type" value="service_retirement_village">
<label for="radioRetirementVillage"><img class="search-button" src="https://cdn.autumna.co.uk/prod/static/img/search/retirement-living-selector-box.abf50719d5ee.png" alt="Retirement Living"></label>
</div>
</div>
<div class="search-tabs" id="search-tabs" style="background-color: rgb(38, 79, 84);">
<div class="tab-content search-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row align-items-center search-box-panel-div">
<div class="search-box-left-panel d-flex align-items-center form-group autocomplete-container">
<div class="input-group input-label-absolute-right input-label-absolute">
<input class="form-control border-0 shadow-0 search-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 class="list-group list-group--home collapse text-left" id="location-search-autocomplete-results"></div>
</div>
<div class="search-box-right-panel">
<button type="submit" class="btn btn-primary btn-block h-100 btn-search">Search</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row align-items-center search-box-panel-div">
<div class="search-box-joint-panel d-flex align-items-center form-group autocomplete-container">
<div class="input-group input-label-absolute-right input-label-absolute">
<input class="form-control border-0 shadow-0 search-input" type="text" name="organisation_search" maxlength="128" title="Search" placeholder="Enter Service or Provider name" id="id_search">
</div>
<div class="list-group list-group--home collapse text-left" id="search-autocomplete-results"></div>
</div>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist" style="display: flex;">
<li class="nav-item search-by">
<a class="nav-link active search-by" 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 class="nav-item search-by">
<a class="nav-link search-by" 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" class="search-content" style="display: none;">
<div class="row">
<div class="search-box-left-panel d-flex align-items-left form-group autocomplete-container">
<div style="text-align: left">
<p class="input-group input-label-absolute-right input-label-absolute">
<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 class="search-box-right-panel">
<a href="/free-advice-lines/care-advice" class="btn btn-primary btn-block btn-search">Find out</a>
</div>
</div>
</div>
<div id="not_sure_div" class="not-sure-div pt4" style="display: block;">
<input type="radio" id="radioOther" name="service_type" class="not-sure" value="service_other" style="display:none">
<label class="not-sure" for="radioOther"><img class="digital-care2" 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){
}
});
});
