css - IE 10 y 11 hacen que los fondos fijos salten cuando se desplaza con la rueda del mouse

image internet-explorer

Question

Cuando se desplaza con la rueda del mouse en Windows 8, la imagen de fondo fija rebota como loca. Esto solo afecta a IE 10 e IE 11. Esto afecta a los elementos con position:fixed . ¿Hay alguna forma de evitar que suceda en IE 10 y 11?

Aquí hay un ejemplo con una imagen de fondo fija:

http://www.catcubed.com/test/bg-img-fixed.html

Answer 1

Aquí hay una solución (probada en Windows 8.1):

Mueva la propiedad CSS "de fondo" al elemento BODY . Actualmente está en el elemento DIV con id = "relleno". Aquí está el CSS resultante:

 body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}

Answer 2

La solución en mi caso era simplemente eliminar la propiedad z-index del elemento que tiene posición: fijo, IE luego detuvo el extraño parpadeo.

(deshabilitar el desplazamiento suave en las opciones de IE funcionó al tiempo que tenía la propiedad z-index, pero esa no es una solución, ya que es muy probable que los usuarios lo tengan activado de manera predeterminada).

Answer 3

Sé que es un poco tarde para una respuesta, pero he tenido el mismo problema y pude solucionarlo agregando estos atributos a mi archivo css

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

De los comentarios:

Esta solución evita que los eventos de desplazamiento se disparen en la ventana, así que tenga cuidado si está utilizando cualquier cosa que dependa de la activación de dichos eventos. codepen.io/anon/pen/VawZEV?editors=1111 (desbordamiento: oculto, los eventos de desplazamiento no funcionan) codepen.io/anon/pen/PNoYXY?editors=1111 (desbordamiento: auto, eventos de desplazamiento disparan) - Dan Abrey

Entonces esto podría causar algunos problemas en sus proyectos. Pero no veo otra forma de solucionar este error en IE.

Answer 4

intente desactivar la opción de desplazamiento suave.

Opciones de Internet - Pestaña Advenced - Use Smooth Scrolling

es como renderizar un error ... El equipo de MS IE está investigando ...

Answer 5

simplemente define contenedor de cuerpo a relativo.

<style>
body
{
position: relative;
}
</style>

Answer 6

Esto se ve como un error de índice z, intente agregar z-index: 1.

Al analizar esto, he encontrado que la mejor forma de depurar es:

Crea un elemento simple en la parte superior de la página, por ej.

 <style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>

En todos los casos anteriores, esto funciona correctamente y el desplazamiento es suave. ¡Así que esto prueba que se puede hacer! Ahora, vuelva a agregar lentamente sus propiedades, hasta que pueda obtener el elemento con la posición fija para que funcione en el contexto de su sitio.

Luego descubrí que agregar un índice z a los elementos solucionados resolvía el problema. (por ejemplo, índice z: 1)

También descubrí que una vez que se establece una posición en un elemento secundario, el error se presenta desde ese punto hacia abajo / adelante. Por lo tanto, debe asegurarse de que ninguno de los elementos secundarios tenga un conjunto de posiciones, o si lo hacen, establece explícitamente una posición en cada elemento secundario.

P.ej

<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>

Es reparable, ¡pero requerirá algunos ajustes!