Vimeo fullscreen (iOS) breaks positioning

[lewismalpas]

Hi,

Firstly, thanks for creating such an amazing plugin - great work!

I'm experiencing an issue on iOS10 (Safari only, Chrome is perfect) which is being caused by a Vimeo embed which plays in fullscreen natively on iOS. The video plays perfectly, however when I click "Done" and the video closes it seems to have affected to positioning of the sections. Please see the URL below: http://rorymstaging.wpengine.com/stack/#thestoryof2016

This doesn't seem to happen every time, but if you play the video and close it a few times you should see that the positioning is affected. The screenshot below shows the issue, obviously I'd love the video to return to the center of the screen when not being viewed:

Thanks in advance for any help, much appreciated.

Lewis.

[lewismalpas]

Hi,

Any ideas what may be causing this issue and a possible solution?

Thanks, Lewis.

[alvarotrigo]

Nop. Didn't look into the issue yet.

[lewismalpas]

Thanks Alvaro, any of your help/expertise would be much appreciated.

Best, Lewis.

[alexmccabe]

It's easier to replicate this by playing the video, rotating the device, then exiting the video.

[lewismalpas]

Hi Alvaro,

It seems the 3d transform on the container is set correctly and I can't see any other property which affects each sections positioning so any help with this issue would be greatly appreciated...

Thanks, Lewis.

[alvarotrigo]

@lewismalpas it might be changing the scrollTop property of the page. Try to check it with $(window).scrollTop()

[lewismalpas]

Thanks Alvaro, will investigate the scrollTop property, if this is the case do you have any advice on a solution?

[lewismalpas]

Just been looking into the scrollTop property, however is this even used when the css3 option is set to true? I am printing the scrollTop within the console using the plugins callbacks but these all read as zero.

[alvarotrigo]

however is this even used when the css3 option is set to true

Not by fullPage.js. But I though the video could somehow be modifying it.

[alexmccabe]

I had a look at the scrollTop value on multiple elements, and they're all set to 0, which is correct, so we are at a loss here. I understand that this is a highly specific instance, but any help is extremely appreciated. Thanks.

[lewismalpas]

Hi Alvaro,

Just noticed the inline style properties on div#fullpage within Safari aren't being set consistently like they are in Chrome in two ways:

1. When scrolling from section to section within Safari the inline translate3d does not increment by the height of the viewport like it does in Chrome.
2. When loading a section, e.g http://rorymstaging.wpengine.com/stack/#corporateexperience, sometimes the style properties are added and sometimes they are not. E.g sometimes when loading this section I get the following:

<div class="section-container fullpage-wrapper" id="fullpage" style="height: 100%; position: relative; transform: translate3d(0px, -2829px, 0px); -webkit-transition: all 1000ms ease; transition: all 1000ms ease;">

But if you keep refreshing sometimes I get this:

<div class="section-container fullpage-wrapper" id="fullpage">

Do you think this is affecting the positioning and causing the Vimeo bug?

Thanks, Lewis.