Schwebendes Parallax DIV-Hintergrundbild springt beim Scrollen über eingebettetes Vimeo YouTube oder Flash nur in Chrome / Safari

8

Ich arbeite an einer Parallax-Webvorlage, die ich heruntergeladen habe und die sich mit Hintergrundbildern teilt, die parallaktisch sind und über anderen Inhalt mit niedrigerem Z-Index schweben.

Immer wenn ich ein Vimeo- oder YouTube-Video mit ihrem iFrame-Code in den unteren Bereich einbettle, springt das Hintergrundbild, dass Parallaxen in y-Richtung springen, sobald das schwebende div den eingebetteten Player "berührt". Das Problem, das ich damit zu tun habe, dass Flash letztendlich als ein iFrame mit einer normalen eingebetteten Seite eingebettet wird, funktioniert wie erwartet - zögern Sie nicht, es auszuprobieren.

Dies geschieht nur in Chrome und Safari. Firefox und IE funktionieren wie erwartet. Ich habe ein abgespecktes JSFiddle aus meiner Webvorlage erstellt, um das Problem zu veranschaulichen. Probieren Sie es in den oben genannten Browsern aus und Sie können das Problem sehen - scrollen Sie einfach das Ergebnis ein wenig.

Ссылка

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

Ich möchte wirklich eine Lösung finden, da ich bereits meine gesamte Website entworfen habe und dieses Problem gerade in Chrome und Safari bemerkt habe.

HINWEIS: Das Problem liegt nicht im Parallax-JS-Code. Ich habe das nur gelassen, um einen Eindruck von der Wirkung zu bekommen. Das Hintergrundbild erscheint immer noch ohne diesen Code.

    
evolross 26.06.2013, 21:51
quelle

1 Antwort

1

Ihre Quellcodequelle enthält wmode=opaque . Verwenden Sie diese Einbettung und es sollte funktionieren:

%Vor%

Hier ist eine aktualisierte Geige: Ссылка

    
Lost Left Stack 12.08.2013, 20:42
quelle