Reine css3-Parallaxe und mobil

Ich verwende transform3D, um einen reinen CSS-Parallaxeeffekt zu erzielen. Ich habe hier ein wirklich chaotisches Demo-Setup:http://codepen.io/anon/pen/nGAvw

Dies ist der Hauptcode für die Übersetzung:

transform: translateZ(-1px) scale(2);
z-index: -1;
transform-style: preserve-3d;

Ich möchte, dass mein parallaxiertes Bild mithilfe des Überlaufs abgeschnitten wird: ausgeblendet. Dies funktioniert problemlos auf Chrome / Safari-Desktops, funktioniert jedoch nicht mehr auf Mobile Safari. Nach meinen weiteren Experimenten funktioniert es gut auf Android, funktioniert aber nicht mehr auf iOS7.

Irgendeine Idee, wie man das löst? Gibt es eine Möglichkeit, übersetzte Objekte unter iOS zu beschneiden?

Antworten auf die Frage(1)

Ihre Antwort auf die Frage