IE 10 и 11 фиксируют фоновые прыжки при прокрутке с помощью колеса мыши

Когда вы прокручиваете колесо мыши в Windows 8, фиксированное фоновое изображение отскакивает как сумасшедший. Это влияет только на IE 10 и IE 11. Это также влияет на элементы с position:fixed. Вот пример с фиксированным фоновым изображением:

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

Вот пример кода:

#section{
    position: fixed;
    top:0;
    left:0;
    background-color:#eee;
    background-position: top left;
    background-image: url("images/7.png");
    background-size: auto; 
    background-repeat: no-repeat;
    z-index: 10;
}

Есть ли решение сохранить фон в IE 10 и 11?

Ответ 1

Я знаю, что уже немного поздно для ответа, но у меня была та же проблема, и я смог ее исправить, добавив эти атрибуты в мой файл CSS

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

Из комментариев:

Это решение предотвращает запуск событий прокрутки в окне, поэтому будьте осторожны, если вы используете все, что зависит от запуска таких событий. codepen.io/anon/pen/VawZEV?editors=1111 (переполнение: скрытое, события прокрутки не работают) codepen.io/anon/pen/PNoYXY?editors=1111 (переполнение: автоматическое, события прокрутки запускаются) - Дэн Абрей

Так что это может вызвать некоторые проблемы в ваших проектах. Но я не вижу другого способа обойти эту ошибку в IE.

Ответ 2

Это выглядит как ошибка z-index, попробуйте добавить z-index: 1.

В этом я нашел лучший способ отладки:

Создайте простой элемент в верхней части страницы, например

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

Во всех вышеперечисленных случаях это работает правильно, а свиток - гладкий. Так что это доказывает, что это можно сделать! Теперь медленно добавьте свои свойства обратно, пока вы не сможете получить элемент с фиксированной позицией для работы в контексте вашего сайта.

Затем я обнаружил, что добавление z-индекса к фиксированным элементам разрешило проблему. (например, z-index: 1)

Я также обнаружил, что после того, как позиция установлена на дочернем элементе, ошибка представляет ее сам с этой точки вниз/вперед. Таким образом, вам нужно убедиться, что ни один из дочерних элементов не имеет заданной позиции, или если они это делают, вы явно устанавливаете позицию для каждого дочернего элемента.

например.

<!-- 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>

Это исправление, но потребует некоторой настройки!

Ответ 3

Ниже приведено обходное решение (проверено на Windows 8.1):

Переместить свойство "background" CSS в элемент BODY. В настоящее время он находится в элементе DIV с id = "filler". Вот результат CSS:

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

Ответ 4

попробуйте отключить функцию плавной прокрутки.

Свойства обозревателя - вкладка "Введен" - использование плавной прокрутки

он как ошибка рендеринга. Команда MS IE расследует....

Ответ 5

Исправление в моем случае состояло в том, чтобы просто удалить свойство z-index из элемента с позицией: fixed, IE затем остановил странное мерцание.

(отключить плавную прокрутку по параметрам IE, работая при наличии свойства z-index, но это не решение, так как пользователи, скорее всего, включили его по умолчанию).

Ответ 6

просто определите контейнер тела для относительного.

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