I have a page, let's say its myweb.com/about-us. It has various sections which are accessible from my navigation bar by using a jump link, i.e. click at myweb.com/about-us/#team and it goes to the #team section.
Problems arise when I open the website with Safari. At myweb.com/about-us, everything is working as they are. However, when I use the link myweb.com/about-us/#team, most images on the page loads, but some images just disappears. Even my logo that is on the navigation bar.
My navigation bar:
<img src="myweb.com/assets/img/missinglogo.png"> <a href="myweb.com/about-us/#team>The Team</a>
And the page:
<html>
<body>
<section id="other">
Other contents here.
<img src="myweb.com/assets/img/anothermissingimage.png">
</section>
<section id="team">List of team members here</section>
</body>
</html>
It's straight forward and is working on any other browsers, so what could be the problem here with Safari?
My image src are dynamic. It calls images by myweb.com/assets/img/img.png so I can't wrap my head around how Safari cannot find it? The images that do load are using the same image src.
The similarities between the images that are missing are that they are small. They don't go over 200px.
Only references I could find with a close relation are something like these: Background image not showing in Safari
- Which doesn't work for me because, first, it's not a background.
- My images are not progressive encoded
- I have resized the images and the error still persists
- None of the missing images have z-index properties
- I have changed the image type from PNG to GIF, and the problem is still there.