Le posizioni corrette non funzionano quando si utilizza -webkit-transform

Question

Sto usando -webkit-transform (e -moz-transform/-o-transform) per ruotare un div. Inoltre, è stata aggiunta la posizione aggiustata in modo che div divenga più scrupoloso all'utente.

In Firefox funziona bene, ma nei browser basati su webkit è rotto. Dopo aver usato il -webkit-transform, la posizione corretta non funziona più! Come è possibile?

Answer 1

Dopo alcune ricerche, sul sito Web Chromium c'è stato un numero bug report relativo a questo problema, finora i browser Webkit non possono rendere insieme questi due effetti contemporaneamente.

Suggerirei di aggiungere alcuni Webkit solo CSS nel foglio di stile e trasformare l'immagine trasformata in un'immagine e utilizzarla come sfondo.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Webkit-specific CSS here (Chrome and Safari) */ 

    #transformed_div { 
    /* styles here, background image etc */ 
    } 
} 

Quindi per ora dovrete farlo alla vecchia maniera, fino a quando i browser Webkit raggiungono a FF.

MODIFICA: A partire dal 24/10/2012 il bug non è stato risolto.

---

Questo sembra non essere un problema, ma un aspetto della specifica dovuta ai due effetti richiedono sistemi e ordini impilamento coordinate separato. As explained in this answer.

Answer 2

Aggiunta di -webkit-transform all'elemento fisso risolto il problema per me.

.fixed_element { 
    -webkit-transform: translateZ(0); 
    position: fixed; 
    .... 
} 

Answer 3

sul mio progetto PhoneGap il webkit trasformare -webkit-transform: translateZ (0); ha funzionato come un fascino. Funzionava già in chrome e safari, non solo nel browser mobile. inoltre può esserci un altro problema in cui i DIV WRAPPER non sono completati in alcuni casi. applichiamo una classe chiara in caso di DIV floating.

<div class="Clear"></div> .Clear, .Clearfix{clear:both;} 

Answer 4

Qualcosa (un po 'hacky), che ha lavorato per me è quello di position:sticky invece:

.fixed { 
    position: sticky; 
} 

Answer 5

Per tutti coloro che trovano le loro immagini di sfondo stanno scomparendo in Chrome a causa dello stesso problema con background-attachment: fisso; - questa è stata la mia soluzione:

// run js if Chrome is being used 
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 
    // set background-attachment back to the default of 'scroll' 
    $('.imagebg').css('background-attachment', 'scroll'); 

    // move the background-position according to the div's y position 
    $(window).scroll(function(){ 

     scrollTop = $(window).scrollTop(); 
     photoTop = $('.imagebg').offset().top; 
     distance = (photoTop - scrollTop); 
     $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px'); 

    }); 
} 

Answer 6

In realtà ho trovato un altro modo per risolvere questo "bug":

Ho elemento contenitore che detengono pagina con animazioni CSS3. Quando la pagina completa l'animazione, la proprietà css3 ha valore: transform: translate (0,0) ;. Quindi, ho appena rimosso questa linea e tutto ha funzionato come dovrebbe - posizione: fissa viene visualizzata correttamente. Quando viene applicata la classe css per tradurre la pagina, viene aggiunta la proprietà translate e anche l'animazione css3.

Esempio:

.page { 
    top: 50px; 
    position: absolute; 
    transition: ease 0.6s all; 
    /* -webkit-transform: translate(0, 0); */ 
    /* transform: translate(0,0); */ 
} 
.page.hide { 
    -webkit-transform: translate(100%, 0); 
    transform: translate(-100%, 0);  
} 

Demo: http://jsfiddle.net/ZWcD9/

Answer 7

Probabilmente a causa di un bug in Chrome come non posso replicare in Safari né Firefox, ma questo funziona in Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

È una struttura molto particolare, quindi non è affatto una correzione css unilinea universalmente applicabile, ma forse qualcuno può armeggiare con esso per farlo funzionare in Safari e Firefox.

Answer 8

Ecco cosa funziona per me su tutti i browser e dispositivi mobili testati (Chrome, IE, Firefox, Safari, iPad, iphone 5 e 6, Android).

img.ui-li-thumb { 
    position: absolute; 
    left: 1px; 
    top: 50%; 

    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Answer 9

posizione fissa di un elemento è rotto se si applica a trasformare qualsiasi antenato.

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok 

<div style='-.*-transform:scale(2)'> 
     <div style='position:fixed'>...</div> // broken 
</div> 

Answer 10

Il CSS Transforms spec spiega questo comportamento. Gli elementi con le trasformazioni agiscono come un blocco contenitore per i discendenti di posizione fissa, quindi la posizione: fissa sotto qualcosa con una trasformazione non ha più un comportamento fisso.

Funzionano quando applicati allo stesso elemento; l'elemento verrà posizionato come fisso e quindi trasformato.

Answer 11

agosto 2016 e la posizione fissa & animazione/trasformazione è ancora un problema. L'unica soluzione che ha funzionato per me è stata creare un'animazione per l'elemento figlio che richiede più tempo.

Answer 12

Se davvero non hanno bisogno la trasformazione del genitore e si desidera che la posizione fissa lavorare di nuovo:

#element_with_transform { 
    -webkit-transform: none; 
    transform: none; 
} 

Answer 13

Se è possibile utilizzare JavaScript come opzione questo può essere una soluzione per il posizionamento di una posizione fissa elemento relavtive alla finestra quando è all'interno di un elemento trasformato:

let fixedEl // some node that you is position 
       // fixed inside of an element that has a transform 

    const rect = fixedEl.getBoundingClientRect() 
    const distanceFromWindowTop = rect.top 
    const distanceFromWindwoLeft = rect.left 
    let top = fixedEl.offsetTop 
    let left = fixedEl.offsetLeft 

    if(distanceFromWindowTop !== relativeTop) { 
    top = -distanceFromWindowTop 
    fixedEl.style.top = `${top}px` 
    } 

    if(distanceFromWindowLeft !== relativeLeft) { 
    left = -distanceFromWindowLeft 
    fixedEl.style.left = `${left}px` 
    } 

Certo si dovrà anche modificare le altezze e la larghezza a causa fixedEl saranno calcolando è con basati su di esso del contenitore. Dipende dal tuo caso d'uso ma questo ti permetterà di impostare in modo prevedibile la posizione di qualcosa fissata, indipendentemente dal suo contenitore.