css - uso - El elemento fijo desaparece en Chrome

position sticky not working

Question

Al desplazarme por un sitio web que he creado, utilizando la position: fixed propiedad CSS position: fixed funciona como se esperaba para mantener una barra de navegación en la parte superior de la página.

En Chrome, sin embargo, si usas los enlaces en la barra de navegación, a veces desaparece. Por lo general, el elemento en el que ha hecho clic sigue siendo visible, pero no siempre. A veces todo desaparece. Mover el mouse devuelve parte del elemento, y al desplazarse con la rueda de desplazamiento o las teclas de flecha con un solo clic, se recupera el elemento. Puede verlo sucediendo (intermitentemente) en http://nikeplusphp.org . Es posible que tenga que hacer clic en algunos de los enlaces de navegación un par de veces para ver si sucede.

También intenté jugar con el índice Z y el tipo de visibilidad / visualización, pero sin suerte.

Me encontré con esta pregunta, pero la solución no funcionó para mí en absoluto. Parece ser un problema de webkit ya que IE y Firefox funcionan bien.

¿Es este un problema conocido o hay una solución para mantener visibles los elementos fijos?

Actualizar:

Solo los elementos de efectos que tienen top: 0; , Intenté bottom: 0; y eso funciona como se esperaba

Answer 1

¿Qué pasa si ninguno de los anteriores funciona en absoluto? caso simple de encabezado adhesivo + menú lateral móvil empujando contenido.

Intento encontrar una manera de evitar el elemento fijo (encabezado fijo) que se está traduciendo, pero en este caso, nada es una buena alternativa.

Entonces, como no hay una solución al alcance hasta ahora, hay una alternativa JS que opté por recalcular la posición absoluta del elemento fijo. Vea aquí: https://.com/a/21487975/2012407

Answer 2

Agregar -webkit-transform: translateZ(0) a la position: fixed elemento position: fixed . Esto obliga a Chrome a usar la aceleración de hardware para pintar continuamente el elemento fijo y evitar este comportamiento extraño.

Creé un error de Chrome para este https://bugs.chromium.org/p/chromium/issues/detail?id=288747 . Por favor estrella para que esto pueda obtener algo de atención.

Answer 3

Encontré el mismo problema en un caso diferente. Fue por el uso de la misma identificación en múltiples lugares. Por ejemplo, utilicé #full 2 ​​divs.

Parece que Mozilla e IE admiten el uso de la misma ID en varios casos. Pero Chrome no. Reaccionó con un elemento fijo que desapareció en mi caso.

Solo eliminar el ID resolvió el problema.

Answer 4

Estaba teniendo el mismo problema con Chrome, parece ser un error que ocurre cuando hay demasiadas cosas dentro de la página, pude solucionarlo agregando el siguiente código de transformación al elemento de posición fijo, ( transform: translateZ(0);-webkit-transform: translateZ(0); ) que obliga al navegador a utilizar la aceleración de hardware para acceder a la unidad de procesamiento gráfico (GPU) del dispositivo para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite que el software haga la mayoría (si no todas) de la representación, lo que resulta en menos caballos de fuerza para las transiciones. Pero la Web se ha puesto al día, y la mayoría de los proveedores de navegadores ahora ofrecen aceleración gráfica de hardware mediante reglas de CSS particulares.

Usando -webkit-transform: translate3d (0,0,0); pondrá en marcha la GPU en acción para las transiciones CSS, haciéndolas más suaves (FPS más altas).

Nota: translate3d (0,0,0) no hace nada en términos de lo que ves. mueve el objeto por 0px en los ejes x, yyz. Es solo una técnica para forzar la aceleración del hardware.

#element {
    position: fixed;
    background: white;
    border-bottom: 2px solid #eaeaea;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9994;
    height: 80px;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

Answer 5

Este es un problema de webkit que aún no se ha resuelto, curiosamente al hacer el salto con JavaScript, en lugar de usar el valor # url, no causa el problema. Para solucionar el problema, proporcioné una versión de JavaScript que toma el valor de anclaje y encuentra la posición absoluta del elemento con ese ID y salta a eso:

var elements = document.getElementsByTagName(''a'');
for(var i = 1; i < elements.length; i++) {
    elements[i].onclick = function() {
        var hash = this.hash.substr(1),
            elementTop = document.getElementById(hash).offsetTop;
        window.scrollTo(0, elementTop + 125);
        window.location.hash = '''';
        return false;
    }
}

Podría refinar esto aún más y es que solo busca enlaces que comiencen con # , en lugar de buscar a etiqueta.

Answer 6

Esto funcionó para mí. Agregue la propiedad Overflow a su contenedor más alto que puede ser Div, Forma, etc.

div, form
{
  overflow:visible;    
}

Answer 7

Esto me lo arregla:

html, body {height:100%;overflow:auto}

Answer 8

Las opciones anteriores no me funcionaron hasta que mezclé dos de las soluciones proporcionadas.

Al agregar lo siguiente al elemento fijo, funcionó. Básicamente el índice z también fue necesario para mí:

-webkit-transform: translateZ(0);
z-index: 1000;

Answer 9

Ninguno de ellos funcionó para mí, excepto llamar al modal a través de javascript

<a href="#/" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = ''block'';
}
</script>

Aparte de esto, ninguna de las soluciones anteriores resolvió mi problema.

Answer 10

Si ninguna de las respuestas anteriores funcionó para usted, asegúrese de que no sea un maniático como yo y tenga desbordamiento: oculto; establecer en el elemento fijo :(

Answer 11

Si no funciona después de agregar

-webkit-transform: translateZ (0)

que también agregar

user-escalable = no

en la meta de la ventana gráfica

fuente here

funcionó para mí