splide list item not showing in safari browser alone

[fingers10]

As the title says, I'm facing this issue in Safari browser in macos and ios. Sometimes when inspecting makes the image to display sometimes not. Not sure of what is the root cause. This works well in other browsers. I have already noticed a discussion on this #692 - Content in slider not showing before hovering over item in Safari not a problem in Chrome but that doesn't help.

Here is site link - https://fingers10.github.io/praveenbackup/

Here is the video showing the issue.
https://user-images.githubusercontent.com/43729469/163902649-865d26bb-13ad-4069-8b6b-8aec352144e9.mov

Please assist on what I'm missing.

[NaotoshiFujita]

Your video shows images are shown first, but when your mouse hovers an image, they disappear. I guess the clue is in your CSS.

[fingers10]

@NaotoshiFujita that is the hover effect. when I hover the images in grid, it will scale. and when I click the image splider is opening with empty list. You can also verify the same from the demo url - https://fingers10.github.io/praveenbackup/ . Issue happens only in safari.

[fingers10]

@NaotoshiFujita Figured out. It's not because of css. It's because of type: "fade" in splide initialisation configuration. Adding this brings the issue in safari browser. Not in other browsers. I removed type: "fade" from my splide configuration and it worked. Is it a bug then?

[NaotoshiFujita]

I guess you are hiding your slider by assigning display:none to your wrapper element. All elements inside a hidden wrapper do not have dimensions (width and height are 0). Calling splide.emit( 'resize' ) or splide.refresh() after your slider gets visible may solve your issue.

[fingers10]

tried this but still no luck.

[NaotoshiFujita]

Then I have no idea. I recommend removeing all custom styles around your slider for debug, especially on slide elements.