2013-06-26 9 views
8

Pracuję nad szablonem sieciowym paralaksy, który pobrałem, który ma elementy div z obrazami tła, które paralaksy i są unoszone nad inną niższą zawartością z-index .Pływające paralaksy DIV Obraz w tle przeskakuje po przewinięciu się nad osadzonym Vimeo YouTube lub Flash w przeglądarce Chrome/Safari Tylko

Za każdym razem, gdy umieszczam wideo Vimeo lub YouTube za pomocą ich kodu iFrame w dolnym obszarze, obraz tła, który paralaksy przeskoczy w kierunku y, gdy pływający element div "dotknie" osadzonego odtwarzacza. Problem, który moim zdaniem ma związek z Flashiem, który ostatecznie został osadzony jako iFrame z normalną wbudowaną stroną działa zgodnie z oczekiwaniami - możesz to wypróbować.

Dzieje się tak tylko w przeglądarce Chrome i Safari. Firefox i IE działają zgodnie z oczekiwaniami. Stworzyłem rozebrany JSFiddle z mojego szablonu internetowego, aby zilustrować problem. Wypróbuj w powyższych przeglądarkach i zobacz, jak to się dzieje - po prostu przewiń nieco wynik.

http://jsfiddle.net/wU2DU/2/

Too much code - just see the JSFiddle - that's the easiest way to see the issue

Naprawdę chcę znaleźć poprawkę bo zaprojektowaliśmy całą moją stronę już teraz i tylko zauważył ten problem w Chrome i Safari.

UWAGA: Problem nie występuje w kodzie paralaksy JS. Zostawiłem to tak, aby można było zobaczyć efekt. Obraz tła nadal pojawia się bez tego kodu.

+0

To ciekawy problem. Wyraźnie wpływa na właściwość załączania tła. –

+1

Próbuję użyć tagu wideo HTML5, którego efektów można uniknąć. –

+0

Spróbuj dodać indeks Z do ramki iFrame. –

Odpowiedz

1

Twój kod źródłowy do umieszczania na stronie ma wmode=opaque w środku. Użyj tej ankiety i powinno działać:

<iframe src="http://player.vimeo.com/video/60982085" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" wmode="transparent"></iframe> 

Oto zaktualizowana skrzypce: http://jsfiddle.net/fxv76/

+0

Właśnie wracałem do tego pytania, wygląda na to, że problem został rozwiązany we wszystkich przeglądarkach teraz, kiedy testuję mój oryginalny JSFiddle. Przekaże tę odpowiedź, odkąd twoja poprawka najwyraźniej działała, gdy nadal była uszkodzona w Chrome i Safari. – evolross