Utilizzare una trasformazione CSS su un'intera pagina compresi sfondi fissi (in Firefox)

Ho creato uno script che ridimensiona il mio sito Web con un certo rapporto: "rat". Faccio una scala, ma che scala crea margini bianchi in modo da trasformare l'intera pagina html e l'ho mandata a origine nelle coordinate 0, 0.Utilizzare una trasformazione CSS su un'intera pagina compresi sfondi fissi (in Firefox)

document.documentElement.style.transform = "scale(" + rat + ")"; 
document.documentElement.style.width = 100/rat + "%"; 
document.documentElement.style.transformOrigin = '0 0';

Il problema che ho è che alcune immagini di sfondo con la seguente proprietà non trasformare:

background-attachment: fixed;

Ogni volta che trasformare la mia pagina html le immagini di sfondo con background-attachment: fixed; non trasformano.

È possibile controllare cosa sto parlando nel mio portafoglio qui:

http://testedesignfranjas.tumblr.com/

Aprire il sito in cromo e in Firefox e vedere le differenze. Il problema è in Firefox.

* scusa per il mio cattivo inglese

fonte

2014-12-17 gn66

Il codice che hai fornito è puro JavaScript. Non c'è jQuery lì a tutti. –

oh ok grazie per la risposta che ho modificato – gn66

Sei sicuro che il codice sopra sia stato eseguito? È inserito nella testa del tuo sito web, e in caso contrario, viene invocato da qualche parte all'interno? –

Ho una risposta parziale. Firefox non considera sempre gli elementi nidificati e fissi correttamente quando si utilizza una trasformazione. Invece di usare l'allegato in background, fai il div con la posizione dell'immagine: fissa. Il secondo div è relativo o statico, quindi si sovrapporrà al primo div.

<body onload="scaleAll(0.8)"> 
    <div id="img1">I have a background image, am scaled and am fixed.</div> 
    <div id="outer"> 
    I have content and am scaled. 
    </div> 
</body>

Ho spostato l'immagine all'esterno del div e ho impostato img1 in posizione: fisso. Effettua il ridimensionamento individualmente, una volta per img1 e una volta per il div esterno che ha il contenuto.

<script> 
function scale(rat, container) { 
    var element = document.getElementById(container); 
    element.style.transform = 'scale(' + rat + ')'; 
    element.style.transformOrigin = '0 0'; 
} 

function scaleAll(rat) { 
    scale(rat, "outer"); 
    scale(rat, "img1"); 
} 
</script>

Lo stile utilizza la posizione: fissa per l'img1 e relativo per l'esterno.

<style> 
    div#outer { 
     position: relative; 
     height: 900px; 
     width: 900px; 
    } 
    #img1 { 
     position: fixed; 
     background: url("image.png") no-repeat; 
     width: 796px; 
     height: 397px; 
    } 
</style>

JSFiddle Example

fonte

2014-12-23 21:52:35 downeyt

utilizzare jQuery per rimuovere l'attributo "fisso" quando si scala documento

$("img").each(function() { 
$(this).css("background-attachment",""); 
});

fonte

2014-12-27 09:14:30

Utilizzare una trasformazione CSS su un'intera pagina compresi sfondi fissi (in Firefox)

risposta

Problemi correlati