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?
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
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');
});
}
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
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
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:
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