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

7 minutos de lectura

Avatar de usuario de iSenne
iSenne

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?

  • Una página de demostración a menudo ayuda a las personas a responder preguntas: jsbin.com le permite crear páginas temporales para ilustrar el problema si no desea vincular a su sitio.

    – Rich Bradshaw

    14 de abril de 2010 a las 11:53

  • jsfiddle.net es otro buen ejemplo de un contenedor de edición temporal.

    – Kyle

    14 de abril de 2010 a las 12:04

  • @Rich Bradshaw jsbin.com es muy agradable. No lo sabía hasta ahora. La mayoría de mis proyectos los ejecuto localmente, así que lo usaré la próxima vez. Tnx

    – iSenné

    15 de abril de 2010 a las 8:57

  • Él no funciona bien en Firefox en absoluto.

    – vsync

    12 de agosto de 2014 a las 15:27


  • Todavía es un problema en 2017. Parece que todavía se apegan a “¡Es una característica, no un error!” argumento…

    – máx.

    20 de diciembre de 2017 a las 16:02

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á.

  • Esa es la única respuesta útil y correcta. Deje de traducir el elemento principal y traduzca los elementos secundarios donde el elemento fijo es parte de él. Aquí está mi violín:JSFDDLE

    – Falk

    18/07/2016 a las 10:30


  • ¿Y si también quiero transformar un elemento fijo?

    – Marc

    7 de septiembre de 2016 a las 8:26

Avatar de usuario de Kyle
Kyle

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.

  • Incluso más años después, todavía no se resuelve. Bastante triste.

    – Alkanshel

    13 de marzo de 2015 a las 22:46

  • De acuerdo con esta respuesta, no es un error sino parte de la especificación.

    – Miguel

    17 de marzo de 2015 a las 15:49

  • Siéntese y mire: apuesto a que vivirá hasta su décimo aniversario.

    – lzl124631x

    29/10/2016 a las 11:25

  • 30 de agosto de 2017, bitácora del capitán. También nos hemos encontrado con la extraña anomalía, que fue descrita hace tanto tiempo por otros capitanes. Aún queda por implementar una solución.

    – Valorar

    30 de agosto de 2017 a las 11:30

  • Este es el error del que me advirtió el padre de mi padre.

    – daniel aagentah

    10 oct 2018 a las 15:22

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

.fixed {
     position: sticky;
}

  • actualizaciones.html5rocks.com/2012/08/… ah sí … pero no está bien respaldado todavía parece

    – coiso

    10 de marzo de 2014 a las 17:54

  • pegajoso es diferente. El problema principal es que con fix queremos ignorar la posición del contenedor (muy útil para animaciones de opacidad, por ejemplo). No puedo creer que este error siga ahí años después. Horrible.

    – Florian B

    7 julio 2016 a las 0:09

  • Esta es la solución correcta en 2022. position: sticky es ampliamente compatible y corrige este comportamiento.

    – Qasim

    20 de junio de 2022 a las 9:10

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

    });
}  

avatar de usuario de defligra
defligra

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.

  • Por favor responda a las nuevas preguntas. Esas preguntas te necesitan más a ti que a la persona que hizo la pregunta en 2010. Ya deben haber resuelto el problema, ¿no crees? Además, esta pregunta ya tiene una respuesta aceptada.

    – Umair Farooq

    16/08/2016 a las 19:51

  • ¡No! Sigue siendo un problema… la persona que hizo la pregunta podría haber encontrado otra solución, pero encontré este hilo por una razón.

    – defligra

    16/08/2016 a las 19:55

  • Como desées. Dejé ese comentario mientras revisaba las primeras preguntas de la gente. Y dado que se unió hoy y fue su primera respuesta y también una respuesta tardía, es por eso que dejé ese comentario. No voté negativo. Esa es una buena oportunidad para ti.

    – Umair Farooq

    16 de agosto de 2016 a las 20:07

  • @UmairFarooq tal vez hacer otra pregunta sería inútil porque podría marcarse como duplicado. Vine aquí solo con una búsqueda en Google y encontré esta pregunta útil, defligra responde también.

    – koMah

    13 de diciembre de 2016 a las 12:25

avatar de usuario de lowselfesteemsucks
baja autoestima apesta

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/

  • Por favor responda a las nuevas preguntas. Esas preguntas te necesitan más a ti que a la persona que hizo la pregunta en 2010. Ya deben haber resuelto el problema, ¿no crees? Además, esta pregunta ya tiene una respuesta aceptada.

    – Umair Farooq

    16/08/2016 a las 19:51

  • ¡No! Sigue siendo un problema… la persona que hizo la pregunta podría haber encontrado otra solución, pero encontré este hilo por una razón.

    – defligra

    16/08/2016 a las 19:55

  • Como desées. Dejé ese comentario mientras revisaba las primeras preguntas de la gente. Y dado que se unió hoy y fue su primera respuesta y también una respuesta tardía, es por eso que dejé ese comentario. No voté negativo. Esa es una buena oportunidad para ti.

    – Umair Farooq

    16 de agosto de 2016 a las 20:07

  • @UmairFarooq tal vez hacer otra pregunta sería inútil porque podría marcarse como duplicado. Vine aquí solo con una búsqueda en Google y encontré esta pregunta útil, defligra responde también.

    – koMah

    13 de diciembre de 2016 a las 12:25

avatar de usuario de mrmadhat
mrmadhat

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?