Restore Document from Import / Persistent Symbols Bug

Symbols
1

Hello Hype Friends,

I am in the process of adding a feature to an interactive website built with Hype, but I have run into a bug.

Here is what seems to be happening:
In the project, I have some buttons and controls that are Persistent Symbols.
These Persistent Symbols are supposed to be hidden behind a blocking element, and when the scene finishes loading after a transition, the blocking element fades to invisible in order to reveal the scene.

Even though the Symbols have Display on top during scene transition unchecked, it appears these symbols are indeed Displaying on top during the scene transition.

And here is the strange thing: When I first built the site, everything was working great. In fact, the site that is currently live now at https://nowherenation.net/omicron/ is running perfectly. But when I open the Hype file and try to work on it, whenever I preview the project on a browser, those Persistent Symbols are not hidden behind the layer as they should be. They are visible for a moment during the transition and then they disappear when the scene transition finishes.

Furthermore, when I download the (perfectly functional) index.html and .hyperesources folder and Restore the Hype Document from Import, once the project is rebuilt and previewed in Hype, the same Persistent Symbols glitch is visible on scene transition. How can this be? The live site is running bug-free, but the Hype project rebuilt from the same files, generates the bug every time!

I've recorded a screen video in order to document the problem. Click here to watch the video.

In this video, I first drag an index.html file from the working live site into a browser and go through a navigation sequence. Transitioning from scene to scene, there are no symbols visible in the black space.

Next in the video, I drag in an .html file called Downloaded Omicron Master.html into the browser. I go through the same navigation sequence, and on the last scene transition, in the upper left of the screen you can see two Persistent Symbols are visible when they shouldn't be (an autoplay button and some audio playback controls).

I've tried workarounds (blocking them in various ways, playing with animating their visibility and opacity, etc). But none of those work. Unfortunately, I can't add updates or features to this site until I can get this bug figured out.

Has anyone else encountered this type of problem before?
Does anyone have any ideas or workarounds?

Lastly, I should mention that I'm happy to share the Hype Document for anyone who might have the inclination to take a look, but it's a fairly complicated site. I don't really have a practical way to make a simplified version. I figured I'd first explain the problem and then share the Hype Document if that seems like the most appropriate thing to do.

Does anyone have any insights? I just figure, this has to be a bug, right?
Thanks so much!

2

It sounds like a bug. Here's what I'd try to see if it's an issue with Hype... use Time Machine to revert Hype back to the version that was used when the project was previously working.

Also, nice looking site. That NN logo flip was cool and nice artwork style.

When you say you played with their opacity, I think I'd start the scene with zero opacity and then have the scene fade it in. That should totally work, unless something else in the project is causing it to be visible.

Also, it seems to flicker in from off to the side. I'd take a look at content overflow, but that seems less likely to be the problem.

I feel like I had a similar problem before with Picopede. If I'm remembering it right, I unchecked the "Display on top during scene transition". Maybe you just need to play with that setting and then an element to cover the other layers.

Eh, I might go crazy and use z-index. HA HA. :crazy_face:

3

Hi Photics!

Thanks so much for your input and insights!
These are all great ideas here.

I finished the site over a year ago. This may indeed be something to try although I wonder if installers for past versions of Hype are still available somewhere?

Thanks!

This a great idea! However, unfortunately there are elements in each scene that need to be visible during the transitions (navigation arrows / buttons). I'd have to restructure the project a good deal to make sure those elements stay visible. Would love to seek out a fix that doesn't require a great deal of restructuring. I'd really rather not have to redo the architecture of this project because of a bug. Still, it's great suggestion.

Yes, you are correct - and I know why it flickers from the top / left side!
This project has 2 layouts: one for tablet and desktop and a separate one for mobile.
When viewed on a desktop browser, the glitch shows up in the exact location that those Persistent Symbols are placed in the mobile layout! So, what it seems, is that even though the glitch shows up in the desktop layout during the transition, it is retaining the placement of the mobile layout. Very strange! I can at least be certain it's not a content overflow issue.

Yep, this is actually exactly how I have the Persistent Symbols set. "Display on top during scene transition" is unchecked and there are elements placed on layers above to block them. During the transitions, since they are floating above these blocking layers even when "Display on top during scene transition" is unchecked, I don't think z-index adjustments would have any effect (but I could be wrong on that).

Thank you again for all of your excellent input!
I think I will go ahead and share the Hype doc on this thread.
I'm still very curious to see if anyone else has run into a bug like this and what (if anything) they did to work around it.

Of all of the options you mentioned, I think trying to revert back to an older version of Hype might be a great first step to try. I'm wondering if my document got corrupted somehow and this might be a way of finding out.

Thanks again for all the ideas!

4

There is a bug that involves persistent symbols being inside a flexible group. I believe we currently do some gymnastics of popping the symbol out and that might be creating what you are seeing. I think the workaround was to not put the symbol in a group, but I don't know if that would be an option for your document.

In the video it looks like you're just reloading the same file though; I'm not sure why that would make a difference at all. Can you please attach the document that reproduces the problem? It would also be useful to have pointers to identify the elements in question and exact written steps while you're at it since this will speed up the ability to look at it.

I'm not sure -- while there are some differences between a restore and original file (I never recommend using a restore unless it is a last resort), I don't think the symbol behavior would be affected.

5

Thanks very much for your reply Jonathan!

The persistent symbols in my document are indeed in a flexible group.
Unfortunately, it would take some substantial reworking to remove them from this group and maintain the same aesthetic. Still, I am curious to try removing them from the flexible group and test just to determine if that does indeed narrow down the issue.

In the video, the first file I loaded has been directly downloaded from the website and it works great.
The second file that I load in the video, is the file that I exported from the Hype document (that was restored from the file that was downloaded). Sorry if that sounds confusing. So, yes they are in essence the same file - but one was unprocessed and the other was freshly generated after being restored and re-exported from the unprocessed file. I'd think these would be identical, which is why it was so confusing that one would not produce the bug and the other does.

I have to get ready to teach now, but yes, absolutely - later today when I have a moment, I'll attach the document along with exact steps on how to reproduce the problem and pointers to locating the elements in question.

Thanks again - I'll be in touch later today with those materials!

1 Like
6

Here they are... Tumult Hype — All Downloads

1 Like
7

Hi Jonathan,

Just wanted to give a quick update.
I got a good jump on putting together the materials but I didn't get it finished (wasn't able to start on it until much later than anticipated).

Going to have to resume putting it together tomorrow evening after work.
I'll share the materials asap!
Thanks for your patience.
rg

1 Like
8

Hi Jonathan,

So sorry for the delay!
I just uploaded a folder containing:

  • The original Hype file (the one that I published the working site with a year ago, but now produces a bug)
  • The index.html file and hyperesources folder copied from the live working website.
  • 2 walkthroughs detailing how to reproduce the problem and how to find the elements in question.

Click here to download the folder.

Hopefully everything will be self-explanatory, but please let me know if you need any more information or clarification on anything at all.
Thanks so much for taking a look!

2 Likes
9

So I had a little play with this.

My thinking is, that since the symbol is pulled out of its container ( or whatever ) as @jonathan explains , then hiding the symbol before the transition would resolve this.
But it does not.

But then I noticed that you do not have the symbol on the MenuPage scene.
This led me to realise why you may be getting this manifestation of the bug.

It would seem that the Symbol is trying to perform a transition from a scene it does not exist on and has no property settings for.

I tested this with the AutoPlayToggleButton1 symbol.

I copied and pasted the symbol to the MenuPage scene.
I then set it's display to hidden.

Previewed and chose the scene1 thumbnail.
Scene1 transitioned and the symbol only showed where it was supposed to to show.

I then copied the other symbols to the MenuPage from scene1 and hid them also.

Screenshot 2021-04-16 at 01.43.07
Screenshot 2021-04-16 at 01.43.072154×1632 330 KB

They also stopped showing during transition.

So a work around may be, put the symbols on all scenes and hide them on any scene that you do not need them. Your other scenes in most cases (I think) will unhide them already...

ps,

Bravo for the detailed explanation files.

3 Likes
10

Thanks for the very detailed steps to reproduce - it made identifying the structure of the problem much easier.

This is definitely a but - indeed it is a regression in Hype 4.0.5. If you need to export, I'd do so in Hype 4.0.3 (4.0.4 is not found :wink:), which can be downloaded here. The document format is the same and so can be opened without issue. There of course have been bug fixes since, so I'd still run through your document to ensure it all works, but most changes from now to then have been more app-related and not runtime related.

It is related to the fix for an issue where persistent symbols were being incorrectly reset; unfortunately it looks like the fallout is that they are not being parented correctly during a scene transition. The plan is to fix this in the next update ASAP.

Thanks and sorry about the issue.

2 Likes
11

Thanks so much for your time with this!
Awesome insights and very cool that you found a workaround - it's especially great to know that I have options.

I think since Jonathan recommends exporting with Hype 4.0.3, I'll take his advice and go that route.
Again, thanks so much for the help!

12

Hi Jonathan,

I really appreciate your taking a look and for sharing the link to download Hype 4.0.3.
I'm happy to use an older version of Hype to publish updates to this site, no problem at all. Just really glad I've got options, so thanks for that - much appreciated!

I just downloaded 4.0.3 and will give it a shot.
All the best and thanks again :+1:

13

Oh, sweet :smiling_face_with_three_hearts:. That means padded WebKit ID's are also being released. Nice! :partying_face:

1 Like
14

Hi @jonathan ,

Just wanted to send a quick follow up.

I was able to export a working version of my document using Hype 4.0.3.

When I preview in a browser from Hype it now works glitch free.
It also works glitch free when I export to an enclosing folder and drag the .html file into a browser.
Thanks again for that suggestion - I can now publish the updates without the bug!
This is awesome.

However, I'm now running into another issue.
The issue seems unrelated, but I figured it would be easiest ask on this thread since it has to do with the same site.

I'm done with the site updates and I am now looking to preview and publish the site.

I've placed the exported site on my server via FTP in order to preview it running on the web.

Strangely, the site loads fine, but all of the imbedded images (which makes up the bulk of the site) are not displaying at all. I've confirmed all of the assets successfully loaded fine into the .hyperesources folder on the server, so I know they are there (and the file sizes are correct). I've also cleared my browser cache before page reload multiple times, so I know it's not that.

How can it be that when I preview the site in a browser from my desktop it works great, but when I try to load the same files from a server the links to the images seem to be broken?

I should clarify there are only a few images that do show up, and they are the .png's that I just added.
Other than that, it seems all of the other other .png's and .svg's in the site are not visible at all.

Here is the url where I am testing the site:

Curiously, the main structure of the site is still there and all of the buttons work (even though they are not visible). Do you see how the pages appear largely blank because there are no images?

Have you seen this sort of this thing before or is there a way of finding out what the problem is?
I feel like I'm missing something simple, but I'm stumped as to why the images are not loading on a server, when they are loading fine from a desktop.

Any input would be very much appreciated!
Thanks so much.

15

If you look at the console you will see loads of errors 403.
This appears to be permission related.

If I copy one of the urls and try to directly open it i a browser window. I get

Forbidden

You don't have permission to access this resource.

Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.

I would check the permissions of the files on the server.

I do notice that couple of files are ok and you possibly could use them to compare .

cigLight_2x.png
cigLightGlow_2x.png

1 Like
16

Thanks so much @MarkHunte!
I very much appreciate your taking a look and pointing me in the right direction. :+1:

Indeed it was a permissions issue.
Seems like it was somehow introduced by uploading with Transmit.
I tried uploading the files directly via my cPanel and all of the images are showing up fine.

Thanks again!

1 Like
17

FYI the fix is in the v4.1.6 beta that was just pushed out. If you can try exporting/previewing with that to ensure it is fixed correctly, that would be awesome!

(If there's anyone else who is reading this not yet part of the beta program, DM me and I'm happy to add you)

1 Like
18

Hi @jonathan,

I just previewed and exported with the v4.1.6 beta.
I got no sign of the bug whatsoever and my persistent symbols are all working great as intended.
Everything seems to be working wonderfully - thanks so much!
rg

1 Like
19

Awesome, glad to hear that! Thanks much for testing it out and getting back about it so quickly.

1 Like