Next scene from right to left causes a white space in Safari

Animation
1

I have created a slide show that you can navigate between scenes. It works great using the go to scene and slide left to right, but when I use slide right to left, it leaves a white space between the two scenes in Safari. No problems in Chrome, just Safari.

Anyone know if this is a bug and/or how to fix it?

2

Can you share a doc as there could be others things at play. Not knowing your setup it would be difficult to reproduce. For example, I have a doc that on keypress of the left or right arrow key, it changes scenes in the way you have mentioned (right to left, left to right) but there is no “white space” between scenes. All scenes have a different background color.

3

Sure. Here’s a stripped down version without the images I am using, but you
can see what I’m talking about. Again, it seems to be a Safari specific
issue.

test.hype.zip (119 KB)

4

Hi @derrick

Thanks for sharing a doc as it’s always difficult to know what’s happening.

It could well be a bug or the way “push right to left” is transitioning. It’s like the scene moves differently (slower) to any elements on top.

@jonathan, @Daniel any ideas?

A workaround to get rid of the w"white stripe" is the give each scene the same color in the scene inspector as the rectangle’s color.

5

In the real version, the whole scene is an image. Making the background a
color won’t help in this instance.

I agree with you that it looks like the scene is moving at a different
speed than everything in it.

6

Then you could add a style rule that changes all scenes “background color” to transparent. That would also work as it’s the background color of the scene that is showing.

If putting it in the head:

<style>
.HYPE_scene {
    background-color: transparent !important;
}
</style>

If you wanted to control which scenes have the transparent background for any reason then you can use the API to get the scene name and then target that specific scene using javascript on scene load. A bit more work but not impossible.

7

That seems to work for now.

Thanks for the help!

8

Unchecking Use WebKit graphics acceleration in the Document Inspector is another workaround to the issue; it appears it might be a rendering bug.