csscross-browserjssor

Safari not displaying jssor slideshow image


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.


Solution

  • 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.