Elemento fijo desaparece en Chrome
Al desplazarse por un sitio web que he creado, el uso de la propiedad CSS position: fixed funciona como se espera para mantener una barra de navegación en la parte superior de la página.
En Chrome, sin embargo, si utiliza los enlaces en la barra de navegación, a veces desaparece. Por lo general, el elemento en el que has hecho clic sigue siendo visible, pero no siempre. A veces todo desaparece. Mover el ratón trae de vuelta parte del elemento, y el desplazamiento con la rueda de desplazamiento o las teclas de flecha con solo un clic trae el elemento de vuelta. Se puede ver que sucede (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 que sucede.
También he intentado jugar con el índice z y el tipo de visibilidad/pantalla, pero sin suerte.
Me encontré con esta pregunta pero la solución no funcionó para mí en absoluto. Parece ser un problema webkit como IE y Firefox funcionan bien.
¿Es este un problema conocido o hay una solución para mantener elementos fijos visible?
Actualización:
Solo efectos elementos que tienen top: 0;, he intentado bottom: 0; y que funciona como se esperaba.
11 answers
Añade -webkit-transform: translateZ(0) al elemento position: fixed. Esto obliga a Chrome a utilizar la aceleración de hardware para pintar continuamente el elemento fijo y evitar este comportamiento extraño.
He creado un error de Chrome para esto https://bugs.chromium.org/p/chromium/issues/detail?id=288747 . Por favor, star it para que esto pueda llamar la atención.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-10 14:54:38
Esto lo arregla para mí:
html, body {height:100%;overflow:auto}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-28 19:34:52
Estaba teniendo el mismo problema con Chrome, parece ser un error que se produce cuando hay demasiado en el interior de la página, fui capaz de solucionarlo mediante la adición de la siguiente transformar el código al elemento de posición fija, (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 del dispositivo (GPU) para hacer volar los píxeles. Las aplicaciones web, por otro lado, se ejecutan en el contexto del navegador, lo que permite al software hacer la mayoría (si no todo) de la representación, lo que resulta en menos caballos de fuerza para las transiciones. Pero la Web se ha estado poniendo al día, y la mayoría de los proveedores de navegadores ahora proporcionan aceleración de hardware gráfico por medio de reglas CSS particulares.
Usando-webkit-transform: translate3d(0,0,0); activará la GPU para las transiciones CSS, haciéndolas más suaves (FPS más altos).
Nota: translate3d(0,0,0) no hace nada en términos de lo que ves. mueve el objeto en 0px en los ejes x, y y z. Es sólo una técnica para forzar la aceleración de 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);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-18 20:45:54
Las opciones anteriores no funcionaban para mí hasta que mezclé dos de las soluciones proporcionadas.
Añadiendo lo siguiente al elemento fijo, funcionó. Básicamente z-index también era necesario para mí:
-webkit-transform: translateZ(0);
z-index: 1000;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-17 00:20:18
Este es un problema de webkit que aún no se ha resuelto, curiosamente hacer el salto con JavaScript, en lugar de usar el valor de url #, no causa el problema. Para superar 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 hacer que solo busque enlaces que comiencen con una #, en lugar de nunca a etiqueta que encuentre.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-02 08:45:44
Me encontré con el mismo problema en un caso diferente. Fue debido al uso del mismo ID en varios lugares. Por ejemplo usé # full 2 divs.
Parece que mozilla e I. E. soporta el uso del mismo id en varios casos. Pero chrome no. Reaccionó con el elemento fijo desapareciendo en mi caso.
Simplemente quitando el id se resolvió el problema.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-06 17:15:33
Si no funciona después de agregar
- webkit-transform: translateZ (0)
Que también añadir
User-scalable = no
En la ventana meta
Fuente aquí
Funcionó para mí
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-04 22:55:00
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-19 21:03:40
Si ninguna de las respuestas anteriores funcionó para usted, asegúrese de que no es un maniquí como yo y tiene overflow: hidden; establecido en el elemento fijo: (
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-18 09:44:39
¿Qué pasa si ninguno de los anteriores funcionó en absoluto? caso simple de encabezado pegajoso + menú lateral móvil empujando contenido.
Trato de encontrar una manera de evitar que el elemento fijo (encabezado pegajoso) se traduzca, pero en este caso nada es una buena alternativa.
Así que como no hay solución en el ámbito hasta ahora hay una alternativa JS que opté por recalcular la posición absoluta del elemento fijo. Ver aquí: https://stackoverflow.com/a/21487975/2012407
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:07
Esto Funcionó para mí . Agregue la propiedad Overflow a su contenedor superior que puede ser Div o Form, etc.
div, form
{
overflow:visible;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-02 15:25:23