css - origin - ''transform3d'' no funciona con la posición: niños fijos

transform scale css hover

Question

Tengo una situación donde, en circunstancias CSS normales, un div fijo se colocaría exactamente donde se especifica ( top:0px , left:0px ).

Esto no parece respetarse si tengo un padre que tiene una transformación translate3d. ¿No estoy viendo algo? He intentado otro webkit-transformar como estilo y transformar las opciones de origen, pero no tuve suerte.

He adjuntado un JSFiddle con un ejemplo donde esperaba que el cuadro amarillo estuviera en la esquina superior de la página en lugar de dentro del elemento contenedor.

http://jsfiddle.net/GMX5H/1/

Esta es una versión simplificada del violín:

<br>
<div style=''position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;''> 
    <div style=''position: fixed; top: 0px; 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;''>
        Inner block
    </div>
</div>

Se agradecerá cualquier sugerencia para hacer que translate2d funcione con niños de posición fija.

Answer 1

Asi que,

No haber encontrado un método satisfactorio para lidiar con esto; y haciendo algunos elementos del panel fuera de lienzo (que requieren traducción): profundicé un poco y descubrí que (al menos para mi caso de uso) el mejor método para lidiar con esto es aplicar la misma traducción, pero romper a los niños que necesitan ser arreglado fuera de su elemento principal (traducido); y luego aplica el traducir a un div dentro de la position: fixed envoltorio position: fixed .

Los resultados se ven algo como esto (en tu caso):

<br>
<div style=''position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;''> 

</div>
<div style=''position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;''>
    <div style=''-webkit-transform:translate3d(0px, 20px, 0px);''>
        Inner block
    </div>
</div>

Fiddle Fork: https://jsfiddle.net/hju4nws1/

Si bien esto puede no ser ideal para algunos casos de uso, normalmente si está arreglando un div probablemente no le importe qué elemento es su elemento primario / dónde se encuentra en el árbol de herencia en su DOM, y parece resolver la mayor parte del dolor de cabeza - al tiempo que permite tanto la translate como la position: fixed para vivir en armonía (relativa).

Answer 2

Como Bradoergo sugirió, simplemente obtenga la ventana scrollTop y agréguela a la posición absoluta top como:

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $(''#fixedContainer'');
  fixedTitle.css(''position'',''absolute'');
  fixedTitle.css(''top'',s + ''px'');
}fix_scroll();

$(window).on(''scroll'',fix_scroll);

Esto funcionó para mí de todos modos.

Answer 3

En Firefox y Safari puedes usar position: sticky; en lugar de position: fixed; pero no funcionará en otros navegadores. Para eso necesitas javascript.

Answer 4

Esto se debe a que la transform crea un nuevo sistema de coordenadas local, según la especificación W3C :

En el espacio de nombres HTML, cualquier valor que none sea none para la transformación da como resultado la creación de un contexto de apilamiento y un bloque contenedor. El objeto actúa como un bloque contenedor para descendientes posicionados fijos.

Esto significa que el posicionamiento fijo se fija al elemento transformado, en lugar de a la ventana gráfica.

Actualmente no hay una solución alternativa que yo sepa.

También está documentado en el artículo de Eric Meyer: desvinculación de elementos fijos con transformaciones CSS .

Answer 5

Estoy teniendo un problema similar y creo que hay trabajo alrededor. Estoy utilizando snap.js y quiero que uno de los divs secundarios del contenedor de contenido se fije a su posición. Sin embargo, cuando se abre el cajón, JavaScript activa la propiedad transform: translate3d para el contenedor primario y esto también afecta al elemento hijo fijo (el elemento fijo se mueve junto con su elemento principal y permanece fijo en la nueva posición).

Dicho esto, la propiedad fija se vuelve parcialmente inútil. Para resolver esto, se puede agregar un detector de eventos que activaría un tranform por separado: translate3d para el div infantil fijo. Y la dirección de este traducir debe ser opuesta a la transformación de los padres: translate3d.

El único problema es que no sé cómo escribirlo y hubiera sido genial si alguien lo hubiera apuñalado.

Answer 6

Intenta aplicar la transformación opuesta al elemento secundario:

<div style=''position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;''> 
    <div style=''position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;''>
        Inner block
    </div>
</div>

Answer 7

Me encontré con el mismo problema. La única diferencia es que mi elemento con ''posición: fijo'' tenía sus propiedades de estilo ''superior'' e ''izquierda'' establecidas desde JS. Así que pude aplicar una solución:

var oRect = oElement.getBoundingClientRect();

El objeto oRect contendrá coordenadas superiores e izquierdas reales (relativas al puerto de visualización). Para que pueda ajustar sus propiedades reales oElement.style.top y oElement.style.left.

Answer 8

Si está trabajando en dispositivos móviles con un menú de descarga, quizás este código lo ayude.

    $(''#toggle-button'').click(function () {
    slideout.toggle();

    // Sticky menu with off canvas menu (for mobile)
    var isMenuDisplaced = $(''.sticky-menu'').hasClass(''is-displaced'');

    if (isMenuDisplaced === false) {
        $(''.sticky-menu'').addClass(''is-displaced'');
        var scrollTopPosition = $(window).scrollTop();
        $(''.sticky-menu'').css(''position'', ''absolute'');
        $(''.sticky-menu'').css(''top'', scrollTopPosition + ''px'');
    }

    else {
        window.setTimeout(function () {
            $(''.sticky-menu'').removeClass(''is-displaced'');
            $(''.sticky-menu'').css(''position'', ''fixed'');
            $(''.sticky-menu'').css(''top'', 0);
        }, 400);
    }


})

Answer 9

Tengo una barra lateral fuera de lienzo que usa -webkit-transform: translate3d. Esto me impedía colocar un pie de página fijo en la página. Resolví el problema al dirigirme a una clase en la página html que se agrega a la etiqueta al inicializar la barra lateral y luego escribir un css: no calificador para indicar "-webkit-transform: none;" a la etiqueta html cuando esa clase no está presente en la etiqueta html. Espero que esto ayude a alguien con este mismo problema.

Answer 10

Tuve un parpadeo en mi navegador fijo superior cuando los elementos de la página usaban la función de transformación, lo siguiente aplicado a mi navegación superior resolvió el problema de salto / parpadeo:

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Gracias a esta respuesta en SO

Answer 11

Una forma de lidiar con esto es aplicar la misma transformación al elemento fijo:

<br>
<div style=''position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;''> 
    <div style=''position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;''>
        Inner block
    </div>
</div>