iFrame content rotates onload

[misterHippo]

Hi,

Having issues with WP implementation of featherlight. The content appears to rotate just before it takes up the assigned width / height.

Notes:

1. iFrame / HTML (I coudln't get an example working from your JS Fiddle example.)
2. Tied to featherlightLoader css animation - Removed this, and it stopped. (But then content came up at about 10em width). I removed more of the related CSS, and it flashed once prior to sorting itself out and showing at the desired width.
3. call: jQuery.featherlight({iframe: '/store/',iframeStyle:'height:85vh;width:85vw'});

I'm assuming that the content is intended to be hidden for longer before reveal, but I guess that isn't happening.

Is this a known issue?

[kevin-j-morse]

I am seeing a similar issue with iframe content. Even though I'm setting the size, the featherlight pops up as a different size and then snaps to the final size.

If I don't specify any styles then it is extremely small.

Have you made any progress?

[misterHippo]

No progress from my side of things. I have reverted all the code back to as-found. And am waiting, hoping that noelboss / marcandre is aware or able to help us resolve this.

[marcandre]

Sorry about the issue you are having.

I haven't looked at iframes in a while. A fiddle would definitely help...

For the first time if my life, I don't have my computer with me, as I'm trekking the Annapurna circuit! I will be reunited with my laptop in about two weeks; I'll either look at this on a plane or when I'm back home in early December...

[marcandre]

Isn't this the same as #365?

[misterHippo]

Yes, it does appear similar. However they don't note any rotation.

Really if it starts thin, and the expands to fit the width of the content, that'd be a step up.

[misterHippo]

So I've worked the fiddle again, and I still can't get it to do it, although I did notice that the fiddle has v1.7.14-UMD, while the installed WP plugin has v1.3 (above).

There doesn't seem to be any updates for it though? (I didn't set this WP install up, I was gifted it during it's development)

Oh.. wait, that might be the plugin version:

I presume the "dev" means that the plugin was developed further?

Thoughts?

(Oh, and also; did the CSS change much between v1.7.13 and v1.7.14?)

[misterHippo]

Hi again - My internet is really slow today, and I've seen more clearly what happens.

The loading css 'graphic' sits there and spins, and then presumably when the iFrame content is ready, it shows the 10em wide (by normal height of iframe) attached to the spinner.

I guess that there's CSS fanciness that is the spinner, and the iframe is caught up in the latter part of the spin.

[Robbendebiene]

I can confirm this issue. You can easily reproduce it when you set the bandwidth throttling to a low bandwidth in your browser.

As @misterHippo pointed out, this happens because the spinner is created by altering the .featherlight-content style and then rotating it. Perhaps using a pseudo element for the spinner would be a better option.

My quick workaround for this was to hide the iframe while featherlight is loading:

.featherlight.featherlight-loading iframe {
    display: none !important;
}

[misterHippo]

Just checking in on this.

@Robbendebiene is correct, setting my connection to 2G in Firebug allowed me to capture this:

This was immediately after the spinner was on the screen.

Try as I might to get you a fiddle, I can't replicate my situation as I cannot load another page in an iframe - "Blocked by X-Frame-Options Policy" comes up all the time. Even using the path / doesn't work.

[misterHippo]

Oh, I just saw an update (v1.3.3) and it still exhibits the same issue.

[rtpHarry]

I'm also seeing this, when using with WP Featherlight plugin. @Robbendebiene 's css fix above did the trick for me.

Unrelated to this but I also had to apply this to the css to stop it from always having a white scrollbar on Chrome:

.featherlight-iframe .featherlight-content {
  overflow-y: auto !important;
}