мерцание фиксированного позиционированного элемента только в IE, как решить?

Три вещи могут вызвать мерцание/прерывистость/задержку IE 11 для элемента с фиксированной позицией при прокрутке:

1. Если у вас есть «переполнение: авто;» в родительском элементе-контейнере удалите его.

2. Удалить фоновое вложение: исправлено; от элемента фиксированного положения.

3. Удалите border-radius из элемента с фиксированной позицией (только для мобильных IE).

У меня была та же проблема, похоже, это ошибка, которая возникает, когда на странице слишком много всего происходит для ваших характеристик компьютера, я смог исправить это, добавив следующий код преобразования в элемент фиксированной позиции, (transform: translateZ(0);-webkit-transform: translateZ(0);), который заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору устройства (GPU), чтобы заставить пиксели летать. Веб-приложения, с другой стороны, работают в контексте браузера, что позволяет программному обеспечению выполнять большую часть (если не все) рендеринга, что приводит к меньшей мощности для переходов. Но Интернет догоняет, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.

Используя -webkit-transform: translate3d(0,0,0); запустит GPU для переходов CSS, делая их более плавными (более высокий FPS).

Примечание: translate3d(0,0,0) ничего не делает с точки зрения того, что вы видите. он перемещает объект на 0 пикселей по осям x, y и z. Это всего лишь метод принудительного аппаратного ускорения.

 #element {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9994;
...other stuff and then
        /* MAGIC HAPPENS HERE */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

Мы можем удалить серое мерцание в IE9, IE10, IE11, MEdge‹=20, установив overflow html и body, например

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

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

По-видимому, «ошибка» затрагивает только IE11 в Windows 8.1 или, возможно, 8.0 тоже. Удаление background-attachmend:fixed сработало для меня. По-видимому, это правило было излишним, поскольку фоновое изображение корректно отображается во всех браузерах без этого правила. Второе решение — отключить плавную прокрутку в настройках IE, но это не оптимально, поскольку она включена при установке по умолчанию.

Мерцающий CSS:

#element_id{
    position:fixed;
    height:100%;
    left:0;
    bottom:0;
    right:0;
    background-image:url('path/to/jpg');
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
}

... и новый код (удалена 1 строка):

#element_id{
    position:fixed;
    height:100%;
    left:0;
    bottom:0;
    right:0;
    background-image:url('path/to/jpg');
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}

Метод аппаратного ускорения, как показано ниже, вызвал мой.

outline: 1px solid transparent;

Удалите его, возможно, это и есть причина.

Другой причиной мерцания, очевидно, может быть другой фиксированный элемент внутри фиксированного элемента. По крайней мере, это было причиной в моем случае. Ложное поведение Edge кажется случайным.

Такое поведение связано с ошибкой в ​​функции «Плавная прокрутка» Microsoft. Происходит в IE10 и 11 на Win7 и выше. Я бы не рекомендовал изменять ваш отлично работающий код, чтобы исправить еще одну ошибку MS. Вместо этого отключите их «функцию», открыв «Настройки Internet Explorer», перейдите в «Дополнительно» и в категории «Просмотр» выберите последнюю опцию, которую вам нужно отключить «Использовать плавную прокрутку».

body Моего веб-сайта было установлено значение position: relative. Удаление этого помогло решить мою эксклюзивную для IE проблему с мерцанием/прыганием.