Strange Behavior with crossfades in Safari with Axel Springer Export Script

Advertising
1

Hello everyone,
I have a strange behavior from hype. I have a simple project with 2 scenes that crossfade. In Google Chorme everything works perfectly. In Safari there is no crossfade. Scene 1 just disappears and that's it. On iOS the project does not work in Chrome or Safari. In desperation, I only used one scene and simulated the fade effect with the opacity.

And now the crazy thing: I closed Hype and then opened it again because I wanted to correct something. And suddenly everything works as it should...even in iOS.

Unfortunately, I only have the HTML data of the strange file. Here you can see what I mean. Is there an explanation for this? Lately I've noticed that Hype behaves strangely...for example, sometimes you can't place an image correctly because the size is displayed incorrectly. Then I have to quit Hype and start it again...and everything works again.

Does anyone have the same problem?

HYPE_sitebar.zip (134,9 KB)

2

Hi Markus,

Sorry you're hitting this issue. It would be great if you could share your original .hype document instead of an export. I'm also seeing issues in Safari.

3

Hello Daniel,

thank you for your support. Here is the hype document. The only problem is that it works now...without any changes. Just restarted hype.

HYPE_sitebar.zip (134,9 KB)

4

This appears to be the same file that you sent previously -- can you send the .hype document and the new export which works?

5

sorry, my mistake

Hype.zip (324,2 KB)

6

Hi Daniel,
Unfortunately, it only works in the Hype preview. I have made a screen recording:

  • on the left you see the preview from Hype with Safari

  • in the middle you see the exported file
    (export script: AxelSpringer) in Safari. This only shows the first image. If you change the browser window, a screen is displayed till the next crossover, that's it.

  • on the right I have created the two images WITHOUT flexible layout. The animation works here, but there is no crossfade.

This is all the data from the hype file I sent you.

7

It seems like there's a bug with the crossfade animation between scenes when using that export script. While we look into this, can you keep the crossfade in one scene using regular opacity animations?

8

You are right. With another export script the crossfade works in Safari. That's how I solved it: everything in one scene and created the crossfade with an animation of the opacity. Thanks for keeping an eye on this again.

9

I took a deeper dive to see what was going on. About all I can say is it is definitely a Safari rendering bug. I thought at first it was related to our code structure of having a <script> tag inside the <a> tag we make for the AxelSpringer export script, but then had some behaviors that didn't align with that theory later when I was implementing a workaround. I think if you're able to solve it on your own that's probably for the best for now!