Las posiciones fijas no funcionan cuando se usa -webkit-transform

Estoy usando -webkit-transform (y -moz-transform / -o-transform) para rotar un div. También se ha agregado la posición fija para que el div se desplace hacia abajo con el usuario.

En Firefox funciona bien, pero en los navegadores basados ​​en webkit está roto. ¡Después de usar -webkit-transform, la posición fija ya no funciona! ¿Cómo es eso posible?

Después de algunas investigaciones, ha habido un informe de error en el sitio web de Chromium sobre este problema, hasta ahora los navegadores Webkit no pueden procesar estos dos efectos juntos al mismo tiempo.

Sugeriría agregar algunos CSS de Webkit solo en su hoja de estilo y hacer que el div transformado sea una imagen y usarlo como fondo.

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

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

Entonces, por ahora, tendrá que hacerlo a la antigua usanza, hasta que los navegadores Webkit alcancen FF.

EDITAR: A partir del 24/10/2012, el error no se ha resuelto.

Esto parece no ser un error, sino un aspecto de la especificación debido a los dos efectos que requieren sistemas de coordenadas separados y órdenes de apilamiento. Como se explica en esta respuesta .

La especificación de Transformaciones CSS explica este comportamiento. Los elementos con transformaciones actúan como un bloque de contención para descendientes de posición fija, por lo tanto, la posición: arreglada debajo de algo con una transformación ya no tiene un comportamiento fijo.

Funcionan cuando se aplican al mismo elemento; el elemento se posicionará como fijo y luego se transformará.

Para cualquiera que encuentre que sus imágenes de fondo están desapareciendo en Chrome debido al mismo problema con el adjunto de fondo: corregido; - esta fue mi solución:

// 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');

    });
}  

Algo (un poco hacky) que funcionó para mí es position:sticky:

.fixed {
     position: sticky;
}

Agosto de 2016 y la posición fija y la animación / transformación siguen siendo un problema. La única solución que funcionó para mí fue crear una animación para el elemento secundario que lleva más tiempo.

En realidad encontré otra forma de arreglar este "error":

Tengo un elemento contenedor que contiene la página con animaciones css3. Cuando la página completa la animación, la propiedad css3 tiene el valor: transform: translate (0,0) ;. Entonces, simplemente eliminé esta línea, y todo funcionó como debería: posición: fijo se muestra correctamente. Cuando se aplica la clase css para traducir la página, se agrega la propiedad translate y la animación css3 también funciona.

Ejemplo:

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

Demostración: http://jsfiddle.net/ZWcD9/

en mi proyecto phonegap, el webkit transform -webkit-transform: translateZ (0); trabajado como un encanto. Ya funcionaba en Chrome y Safari, pero no en el navegador móvil. También puede haber un problema más es que los DIV de WRAPPER no se completan en algunos casos. Aplicamos la clase clara en caso de DIV flotantes.

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

Probablemente debido a un error en Chrome, ya que no puedo replicar en Safari ni Firefox, pero esto funciona en Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

Es una estructura muy particular, por lo que de ninguna manera es una solución CSS universalmente aplicable de una sola línea, pero tal vez alguien pueda jugar con ella para que funcione en Safari y Firefox.

Tuve este problema al intentar implementar react-color con react-swipeable-views (rsw). El problema para mí fue que rsw se aplica translate(-100%, 0)a un panel de pestañas que rompe la división de posición fija predeterminada agregada en la pantalla completa que al hacer clic cierra el modelo de selector de color.

Para mí, la solución fue aplicar la transformación opuesta al elemento fijo (en este caso, translate(100%, 0)que solucionó mi problema. No estoy seguro de si esto es útil en otros casos, pero pensé que compartiría de todos modos.

Aquí hay un ejemplo que muestra lo que he descrito anteriormente:

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

Agregar el -webkit-transformelemento fijo me resolvió el problema.

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

Esto es lo que funciona para mí en todos los navegadores y dispositivos móviles probados (Chrome, IE, Firefox, Safari, iPad, iphone 5 y 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 posición fija de un elemento se rompe si aplica la transformación a cualquier antepasado.

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

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

Si puede usar JavaScript como una opción, esto puede ser una solución alternativa para posicionar un elemento fijo de posición relativo a la ventana cuando está dentro de un elemento transformado:

  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`
  }

De acuerdo, también tendrá que ajustar sus alturas y ancho porque fixedElcalculará con base en su contenedor. Eso depende de su caso de uso, pero esto le permitirá establecer de manera predecible la posición de algo fijo, independientemente de su contenedor.

Agregue una clase dinámica mientras el elemento se transforma. $('#elementId').addClass('transformed'). Luego continúa declarando en css,

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

luego

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

luego

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

Ahora posición: fijo cuando se proporciona un valor de propiedad superior e índice z en un elemento secundario, funciona bien y permanece fijo hasta que el elemento primario se transforma. Cuando se revierte la transformación, el elemento secundario aparece como fijo nuevamente. Esto debería facilitar la situación si en realidad está utilizando una barra lateral de navegación que se abre y cierra con un clic, y tiene un conjunto de pestañas que debe permanecer fijo mientras se desplaza hacia abajo en la página.

en mi caso descubrí que no podemos usar transform: translateX () antes de transform: translateY (). si queremos usar ambos debemos usar transform: translate (,).

Por favor, no vote, porque esta no es la respuesta exacta, pero podría ayudar a alguien porque es una forma rápida de desactivar la transformación. Si realmente no necesita la transformación en el padre y desea que su posición fija vuelva a funcionar:

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