Workaround: Flexible Document wrong width after scene transition

Okay

I just upgraded from Hype 2.5 to 3.03. All I did was open a hype 2.5 document and save it and export it as HTML5.

Before I did this, everything was working perfectly.

They Hyde document is set to scale properly, and is placed inside a full width div in a bootstrap web page. When it first loads, everything looks great, but when I trigger it to load the next scene, there is a flash and it reverts back to its original size, leaving part of the content to right cut off from view. interaction with the page does nothing, but if I resize the window even by a pixel, it all snaps back into view and scaled appropriately. This happens with every scene transition.

Again, before upgrading, this was not an issue. All i did was open the document in Hype 3, save it, and export it as HTML5 and upload it all to my server.

thoughts?

***** upon further investigation of the web inspector, I noticed the following difference between a page with a hype 2.5 document and a page with a hype 3.03 doc:

Hype 2.5

Hype 3.03

The new way seems to set a original width and height on every hype_scene div that, during the transition, gets changed to width=100%, but keeps all the pinned absolute positioning based of the original size, until you resize the window even by just a pixel, at which point all the values change to what they are supposed to be.

How can I fix this please?

I’m sorry you’re hitting this issue.

Could you please submit an issue from within Hype, using Help > Report an Issue? When you do so, please also include your document in the Issue Reporter’s Attachments section, and ensure that the “Send logs, preferences, and system information” checkbox is checked.

Also, do you have a backup of either your .hype document or exported files from version 2.5? If so, please send that as well.

Hi Daniel

I followed those instructions and submitted everything as you asked on the 28th. Has anyone had a chance to look things over? Still waiting for a response.

It looks like the issue is the presence of the border in the parent element. I recommend wrapping your Tumult Hype document in an additional element which has no border (it can be a simple div):

<div>
<!-- your Hype document code goes here.  -->
</div>

When we determine how the document should flex within its container after a scene change, we look at the container one level above the Hype document. We’re not taking into account the border width, because the ‘offset’ property we use to determine the width of the parent does not include this border. I don’t think we’ve encountered this issue yet because thick borders like this are rare in layouts.

We’ve added this bug to our tracker and we’ll see if there’s something we can do to avoid this issue.

1 Like