La posición fija no funciona cuando se usa -webkit-transform

Question 1

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

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

Question 2

El Especificación de transformaciones CSS explica este comportamiento. Los elementos con transformaciones actúan como un bloque contenedor para los descendientes de posición fija, por lo que position:fixed debajo de algo con una transformación ya no tiene un comportamiento fijo.

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

Question 3

Después de algunas investigaciones, ha habido una informe de error sobre el Cromo sitio web sobre este problema, hasta ahora los navegadores Webkit no pueden representar estos dos efectos al mismo tiempo.

Sugeriría agregar algo de CSS solo de Webkit en su hoja de estilo y convertir el div transformado en 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 */
  }
}

Así que por ahora tendrás que hacerlo a la antigua usanza, hasta que los navegadores Webkit se pongan al día con 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 que los dos efectos requieren sistemas de coordenadas separados y órdenes de apilamiento. Como se explica en esta respuesta.

Question 4

Algo (un poco raro) que funcionó para mí es position:sticky en cambio:

.fixed {
     position: sticky;
}

Question 5

Para cualquiera que encuentre que sus imágenes de fondo están desapareciendo en Chrome debido al mismo problema con el archivo adjunto de fondo: fijo; – 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');

    });
}

Question 6

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.

Question 7

En realidad, encontré otra forma de solucionar este “error”:

Tengo un elemento contenedor que contiene una página con animaciones css3. Cuando la página completó 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: position: fixed se muestra correctamente. Cuando se aplica la clase css para traducir la página, se agrega la propiedad de traducción 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);    
 }

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

Question 8

Tuve este problema al intentar implementar react-color con react-swipeable-views (rsw). El problema para mí fue que se aplica rsw translate(-100%, 0) a un panel de pestañas que rompe el div de posición fija predeterminado agregado sobre la pantalla completa que, cuando se hace 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é en compartirlo de todos modos.

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

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

¿Ha sido útil esta solución?