I have been looking for a solution for this for months now, but can't find it so I'm trying it here.
We have several responsive Bootstrap 4 websites that have one problem: - images on iPhone and iPad devices will not load. Only after one or more refreshes.
This how we have it running, under the highest SSL levels:
- website domain: www.website.com - images location: subdomain.otherdomain.com
Both are on the same server and SSL certificate, and the SSL is installed correctly. I must include here that the domain without 'www' is not in the SSL.
This is the images tag that works on any other browser on any other device:
<img class="img-fluid fit-image" src="https://subdomain.otherdomain.com/subdir/2020/img-name.jpg" alt="Not working"></a>
Does anyone have an idea how to solve this? Or are there people experiencing the same?
It took a while to figure this issue out. Here's the ultimate solution if you ever encounter images not loading in Safari.
It is an annoying bug in Apple's Safari on all their devices, just not being able to load url requests from a subdomain that even has an SSL certificate installed.
The solution is quite easy: If a sub.domain.com shares an SSL certificate with more than 10 domain names, Safari doesn't like it.
The situation explained
Then: Safari on all Apple devices says: let's block the images from 'sub.domain.com'. (Even when it is the same domain name.)
To be safe and secure on images and other files loaded into domain.com or anydomain.com in Safari, everything from 'sub.domain.com' has to be on a single certificate. The cheapest certificate already works. Safari is just looking for clean data in a certificate without too many interference from other domains in the same certificate. Extra advice: the best way is to load files from an entirely other domain: https://domain2.media.
When loading data from another SSL location into a website, make sure that https location has his own single SSL.