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

Sto usando -webkit-transform (e -moz-transform / -o-transform) per ruotare un div. Hanno anche aggiunto la posizione fissa in modo che il div scruti verso il basso con l'utente.

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

Dopo alcune ricerche, sul sito Web Chromium è stato segnalato un bug su questo problema, finora i browser Webkit non sono in grado di eseguire il rendering di questi due effetti contemporaneamente.

Suggerirei di aggiungere solo alcuni CSS di Webkit nel tuo foglio di stile e rendere l'immagine div trasformata un'immagine e usarla 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 dovrai farlo alla vecchia maniera, fino a quando i browser Webkit non raggiungeranno FF.

EDIT: dal 24/10/2012 il bug non è stato risolto.

Questo sembra non essere un bug, ma un aspetto della specifica a causa dei due effetti che richiedono sistemi di coordinate separati e ordini di sovrapposizione. Come spiegato in questa risposta .

Le specifiche Transforms CSS spiegano questo comportamento. Gli elementi con trasformazioni fungono da blocco di contenimento per i discendenti di posizione fissa, quindi posizione: riparato 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.

Per chiunque trovi che le proprie immagini di sfondo stanno scomparendo in Chrome a causa dello stesso problema con lo sfondo allegato: risolto; - questa era 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');

    });
}  

Qualcosa (un po 'confuso) che ha funzionato per me è position:stickyinvece:

.fixed {
     position: sticky;
}

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

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

Ho un elemento contenitore che contiene la pagina con animazioni css3. Quando la pagina ha completato l'animazione, la proprietà css3 ha valore: transform: translate (0,0) ;. Quindi, ho appena rimosso questa riga e tutto ha funzionato come dovrebbe - position: fixed è visualizzato correttamente. Quando viene applicata la classe css per tradurre la pagina, viene aggiunta la proprietà translate e anche l'animazione css3 funziona.

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/

sul mio progetto phonegap il webkit transform -webkit-transform: translateZ (0); ha funzionato come un fascino. Funzionava già in Chrome e Safari, ma non nel browser per dispositivi mobili. inoltre può esserci un altro problema: i DIV WRAPPER non sono completati in alcuni casi. applichiamo la classe chiara in caso di DIV mobili.

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

Probabilmente a causa di un bug in Chrome poiché non riesco a replicare in Safari o Firefox, ma 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 essa per farlo funzionare in Safari e Firefox.

Ho riscontrato questo problema durante il tentativo di implementare la reattanza-colore con viste reattive-scorrevoli (rsw). Il problema per me era che rsw si applica translate(-100%, 0)a un pannello a schede che interrompe il div predefinito di posizione fissa aggiunto su tutto lo schermo che quando si fa clic chiude il modello di selezione colore.

Per me la soluzione era applicare la trasformazione opposta all'elemento fisso (in questo caso translate(100%, 0)ciò ha risolto il mio problema. Non sono sicuro che ciò sia utile in altri casi, ma ho pensato di condividere comunque.

Ecco un esempio che mostra ciò che ho descritto sopra:

https://codepen.io/relativemc/pen/VwweEez

L'aggiunta -webkit-transformdell'elemento fisso ha risolto il problema per me.

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

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%);
}

la posizione fissa di un elemento viene interrotta se si applica la trasformazione a qualsiasi antenato.

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

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

Se puoi usare javascript come opzione, questa può essere una soluzione alternativa per posizionare un elemento fisso di posizione relativo alla finestra quando si trova 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`
  }

Concesso dovrai anche regolare le tue altezze e larghezza perché fixedElcalcolerà la sua base sulla base del suo contenitore. Dipende dal caso d'uso, ma ciò ti consentirà di impostare in modo prevedibile la posizione fissa, indipendentemente dal contenitore.

Aggiungi una classe dinamica mentre l'elemento si trasforma. $('#elementId').addClass('transformed'). Quindi continua a dichiarare in css,

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

poi

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

poi

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

Ora posizione: risolto quando fornito con valori di proprietà top e z-index su un elemento figlio funziona bene e rimane fisso fino a quando l'elemento genitore si trasforma. Quando la trasformazione viene ripristinata, l'elemento figlio viene nuovamente visualizzato come risolto. Ciò dovrebbe alleviare la situazione se in realtà stai usando una barra laterale di navigazione che si apre e si chiude con un clic, e hai un set di schede che dovrebbe rimanere appiccicoso mentre scorri la pagina.

nel mio caso ho scoperto che non possiamo usare transform: translateX () prima di transform: translateY (). se vogliamo usare entrambi dovremmo usare transform: translate (,).

Per favore, non votate, perché questa non è una risposta esatta, ma potrebbe aiutare qualcuno perché è un modo veloce per disattivare la trasformazione. Se davvero non hai bisogno della trasformazione sul genitore e vuoi che la tua posizione fissa funzioni di nuovo:

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