html - ejemplos - por qué-webkit-transform: translate3d(0, 0, 0) se confunde con hijos fijos

transform css generator

Question

Durante las últimas horas he intentado averiguar cómo es que un elemento secundario se posicionaba en contra de su padre y no en la pantalla, a pesar de que está posicionado como "fijo". Afortunadamente, me topé con la mención de que -webkit-transform: translate3d(0, 0, 0) en el padre puede hacer que las cosas salgan mal. Estoy usando bootstrap framework y, de hecho, pusieron esta propiedad en la .navbar-fixed-top que tenía uno de los elementos principales. Una vez que lo quité, el niño comenzó a colocar la ventana de nuevo. Así que tengo dos preguntas:

1. ¿Por qué -webkit-transform: translate3d(0, 0, 0) hace estas cosas desagradables?
2. ¿Por qué los chicos de bootstrap ponen esta propiedad para la .navbar-fixed-top ?

ACTUALIZAR
Bueno, parece que he encontrado la respuesta a la segunda pregunta. Aquí está el mensaje de confirmación:

Se aplicó translate3d a modal, se corrigió con la barra de navegación y se fijó para combatir el repintado del navegador

Aquí está la respuesta a la segunda pregunta:

Cualquier valor computado que no sea ninguno para la transformación resulta en la creación tanto de un contexto de apilamiento como de un bloque contenedor. El objeto actúa como un bloque de contención para los descendientes de posición fija.

Answer 1

Respecto a tu primera pregunta:

Estás utilizando transformaciones. Eso es lo que está causando el problema.

Eche un vistazo a la especificación: el modelo de procesamiento de transformación

Al especificar un valor distinto de ''ninguno'' para la propiedad ''transformar'' se establece un nuevo sistema de coordenadas local en el elemento al que se aplica.

Por lo tanto, el elemento con posicionamiento fijo se volverá relativo al elemento con la transformación, no la ventana gráfica.

Answer 2

Utilicé esta "piratería" (- webkit-transform: translate3d (0, 0, 0)) para corregir fallos de la escala de transformación (algunos elementos se movían cuando estaba interactuando con la página) pero tuve un problema con la posición fijada en el kit web. (No pude concentrarme en las entradas de texto de posición fija) y cuando lo quité, se arregló. Como estaba usando la escala de transformación solo en Firefox, no tuve ningún problema en eliminarlo (en el kit de web terminé usando el zoom que actúa mucho mejor que transformar: la escala (pero -webkit-transform: translate3d (0, 0, 0) se dejó ahí desde el css heredado) y espero que Firefox también admita el zoom)