Exhibeo Impress gallery not behaving correctly in Safari

I recently notice that the Exhibeo galley (Impress) on my opening webpage does not behave correctly. e.g. In some instances images are displayed in top of each other.
Page: Thuis

The gallery is behaving correctly when previewed in Exhibeo (version 2.0.10).

I only noticed this recently as in the past the issue did not occur. I guess it may have come up when I started using Xway b5.

I have recreated the gallery in Exhibeo under a different name and replaced the current gallery in Xway. Same problem.
I have created a blanc new Xway file/page, inserted the Exhibeo component. Same problem.

Do others have the same/similar problems?

Can anyone help me how to solve the issue?

I have just looked at it and seems perfectly ok to me.

Hi Kees,

I think I can reproduce this, although I also see the problem in Exhibeo’s preview. It looks like a bug in Exhibeo. If you can send us a sample document, so we know we’re looking at the same problem, that would be helpful (send it to support at softpress dot com).

Hi Jeremy,

Thank you for your feedback.
I guess you refer to an Exhibeo document. I will send that to the address you mention in your response.

Hi Kees,

Thanks for the document, but I should have asked you to include the original images. You can do this by choosing Save Archive from Exhibeo’s file menu. This will save a folder with the document and images. If the images are quite large, you could duplicate the original document (File > Duplicate) and use this to create a cut-down version that reproduces the problem.

Another option is to upload the original document and images to a file sharing service (e.g. Dropbox) and send us a link.

I have sent the original file including the images this time via a file sharing service. hope this works.

Got it, thanks! The image that shows this problem for me (sometimes but not always within Exhibeo’s Preview, and usually on output) is the sixth (narrow) image - which is sometimes superimposed on the first image.

I’ve asked @simonmanning (who is our Exhibeo expert) to look into this.

The problems at my end occurs at several other occasions as well (at one instance three pictures are superimposed!). I have taken pictures (attached) from my computer screen where I opened the opening page of my website (http://www.kcleblanc.demon.nl/index.html).

I think it’s a JavaScript problem (the actual exported images aren’t superimposed), and it may be specific to Safari/WebKit. The problem doesn’t seem to happen if I view your site in Firefox. I haven’t tested older versions of Safari, but it’s possible that the problem is specific to recent versions (I’m using 15.4).

Thank you for your feedback Jeremy. I am also using Safari version 15.4

If the problem is Safari/webkit related is it then something Softpress will/can solve in Xway or Exhibeo or is it for Apple to solve in Safari?

We’ll try to solve or work around it in Exhibeo if we can.

Hi David,

Out of interest, what browser are you using? I see the problem in Safari 15.4, but I don’t see it in Firefox.

Hello Jeremy

I am using Firefox where the problem doesn’t seem to happen but just looked on Safari and find it happens on 6th and 8th picture and some later after that too. Hope that helps.

Regards

David

The container div for each image that is not currently active gets its opacity set to 0, i.e. it is fully transparent. In Safari, the child of that is not inheriting the opacity after an animation has occurred and so is being displayed fully opaque.

I’m unclear on exactly what the correct behaviour is here but considering Safari works the way I expect until an animation has completed, I’m inclined to believe this is a bug in Safari rather than intentional. This is pretty straightforward to work around by adding a bit of extra CSS.

In Xway, select the page with your gallery and open the CSS Markup section in the Page Inspector. Paste the following into the text field:

.step:not(.active) div { opacity:0 }

If you have Impress galleries on other pages, you may wish to do that on the appropriate master page instead.

Thank you Simon for your support. I have implemented your solution and it now works perfect in Safari as well.