html - ¿Por qué ''transform` break `position: fixed`
css twitter-bootstrap (1)
Con respecto al por qué , una cita rápida de este article de meyer:
Un elemento transformado crea un bloque contenedor incluso para los descendientes que se han establecido en posición: fijo. En otras palabras, el bloque contenedor para un descendiente de posición fija de un elemento transformado es el elemento transformado, no la ventana gráfica
Es un comportamiento peculiar que existe desde 2011.
En realidad, he encontrado lo que ha causado el problema.
Mi pregunta ahora es por qué agregar
transform
a su
html, body
rompe la
position: fixed
¿
position: fixed
?
Problema original
La tarea CSS más simple parece fallar para mí:
position: fixed
no mantiene la posición del elemento en relación con el punto de vista.
Considere la siguiente hoja de estilo:
.stay-there-dammit {
position: fixed;
right: 0px;
left: 0px;
z-index: 1030;
}
Por primera vez que se carga la página, el posicionamiento es correcto.
Pero cualquier cambio en la ventana
.stay-there-dammit
como el desplazamiento o el cambio de tamaño no afecta la posición del elemento
.stay-there-dammit
.
Por así decirlo, no adapta su posición a la nueva ventana gráfica.
Por extraño que parezca,
este sitio
que muestra cómo la
position: fixed
debería funcionar, ¡en realidad funciona en mi navegador sin ningún problema!
Entonces la pregunta es: ¿hay algo que pueda romper el posicionamiento fijo?
Por cierto. Yo uso Bootstrap 3.
ACTUALIZAR:
Parece que fue la transformación establecida por una aplicación de terceros en
html,body
que rompió la
position: fixed
.
Esto es lo que tuve que eliminar:
html, body {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3, mirror=1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
Parece que la siguiente pregunta aborda el mismo problema:
Las posiciones fijas no funcionan cuando se usa -webkit-transform
¿PERO POR QUÉ?