Safari not displaying jssor slideshow image

173 Views Asked by At

I have a slideshow here: https://namibiabowhunting.com/vbook.html

All browsers except Safari show the images.

Inspecting the elements using Safari for Windows (v. 5.1.7) it seems that css and the images are loading correctly, but the images are not being displayed.

I also tried modifying the z-index of images, but that did not make a difference either.

Since there is no newer version of Safari for Windows available I do not know if this problem disappears with newer versions.

Any help in identifying the issue would be appreciated.

2

There are 2 best solutions below

2
Random Elephant On BEST ANSWER

I've found the issue.

On your page you have a <div> structure with several divs being parents of the <img> tag that's not showing. While the <img> tag has its width and height set, and some parent <div> tags as well, it's still inside parent <div>'s that have height: 0 either set or inherited, but have overflow:hidden; set. See in the inspector which div has 0 height, and set either it's height: 100%; or min-height: 100%; or delete overflow:hidden; and that should do it.

So either unset overflow:hidden; on <div class="slideimg"> (on both y and x) or set height/min-height to 100% on the child of <div id="jssor_1"> AND the child of that child.

3
Random Elephant On

If inspecting element shows correct CSS and the images and you are 100% sure they should be there but aren't, you might have disabled displaying images in Safari itself. You can try another page if it shows images in Safari.

Anyway, if it indeed is a problem of Safari itself do the folowing -

  1. Click the "Safari" menu in Safari and select "Preferences."

  2. Click the "Appearance" icon.

  3. See if you have "Display images when the page opens." checked and check if not, do check that.

If those settings aren't available, check if you don't have "Disable images" checked in the "Develop menu".

(Once I can comment, I'll actually simply ask in comments and edit this answer accordingly.)

(Also - you should provide a code snippet of the problematic part or similar for the future users. If the website in question stops working or changes, this question will no longer make sense and provide the information expected.)