El elemento fijo desaparece en Chrome

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

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.

Esto me lo arregla:

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

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); } 

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; 

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.

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.

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 aquí

funcionó para mí

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

 Click me to open MyModal  

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

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 🙁

¿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 scope hasta ahora, hay una alternativa JS que opté por recalcular la posición absoluta del elemento fijo. Vea aquí: https://stackoverflow.com/a/21487975/2012407

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

 div, form { overflow:visible; }