rdallasgray / roto

A simple, flexible, touch-capable scrolling plugin for jQuery.
http://rdallasgray.github.com/roto/
BSD 2-Clause "Simplified" License
72 stars 10 forks source link

iframe content does not react #20

Closed jcschrod closed 12 years ago

jcschrod commented 12 years ago

I love your plugin. It's awesome!

So far I've used it to slide images and text content and it works like a charm. However, I'd like to use it to slide content in iframes. More specifically embedded videos from vimeo.com.

With the latest version it works fine when the page is initially loaded. But, when I slide using drag or next button I can no longer start the movie. It seems like the mouse action never reaches the embedded content in the iframe. The video player controls does not react to hover or click any more.

I've tried to add "iframe" to the clickables variable but that didn't make any difference.

Is there anything I can do to make this work with current version?

Best regards, Jens

rdallasgray commented 12 years ago

Hi Jens -- could you put some sample code on jsfiddle, or send it to me, so I can run some tests?

Thanks a lot,

Robert

jcschrod commented 12 years ago

Hi Robert,

Thanks for your quick response :)

Never used jsfiddle before but managed to setup an example i think.

http://jsfiddle.net/jcschrod/jRp6r/

jcschrod commented 12 years ago

just tested in firefox, safari and IE9.

Everything works fine in IE9. However issue is slightly different in firefox and safari.

In safari the video in the first slide works but the second video does not.

In firefox the video in the first frame works until there has been interaction with the roto elements.

rdallasgray commented 12 years ago

Thanks Jens -- I'll take a look as soon as I can (am quite busy just now so may take me a few days to get back).

rdallasgray commented 12 years ago

Hi Jens -- I've had a quick look. It seems to be a problem with CSS transitions -- they may be interacting with Flash or the use of iframes, I can't be certain without further investigation. Roto doesn't use transitions on IE9 -- so it would make sense that everything seems OK there.

A quick fix would be to specify "disable_transitions: true" in the options given to Roto. That seems to work for me -- but note that it will make your animations slower on iOS.

jcschrod commented 12 years ago

Thanks Robert!

Works great.

Is there any chance that you will make a permanent 'fix' for this so that it works on iOS as well?

Cheers, Jens

rdallasgray commented 12 years ago

Well, my suspicion is that it's a problem with the way Vimeo are embedding their clips, rather than a problem with Roto ... I can't confirm that without trying other content in frames, though, which I won't have time to do for a bit.

If you disable CSS transitions, everything will still work on iOS -- the animations just won't be as smooth.