Почему фоновое изображение перемещается при прокрутке в IE?

Ответ 1

Это известная ошибка с фиксированными фоновыми изображениями в Internet Explorer. Недавно мы немного поработали над улучшением этого поведения и отправили обновления в нашу предварительную сборку Internet Explorer в Windows 10. Сегодня вы можете протестировать изменения с Mac OS X или Windows на http://remote.modern.ie.

Ниже представлены до и после IE 11 и IE Remote Preview. Обратите внимание, что прокрутка с помощью колеса мыши больше не приводит к скачку фиксированного фонового изображения (или дрожанию), как в Internet Explorer 11.

Ответ 2

Мое последнее исправление основано на всех ответах, которые я нашел:

В главном css для Edge/ie11/ie10

/*Edge*/
@supports ( -ms-accelerator:true ) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

Для ie9, ie8 и ie7, я добавил код (без медиа-запроса) в отдельный hackheet:

<!--[if lte IE 9]>
    <style type=text/css>
       html{
           overflow: hidden;
           height: 100%;    
       }
       body{
           overflow: auto;
           height: 100%;
       }
    </style>
<![endif]-->

Ответ 3

Я попытался отключить некоторые правила css на вашем сайте и когда я удаляю свойство фона (background: #fff;) для тега html, тогда страница прокручивается плавно. Пожалуйста, попробуйте и скажите, работает ли оно для вас.

Update:

Я также нашел обходное решение здесь:

$('body').on("mousewheel", function () {
  event.preventDefault();

  var wheelDelta = event.wheelDelta;

  var currentScrollPosition = window.pageYOffset;
  window.scrollTo(0, currentScrollPosition - wheelDelta);
});

Ответ 4

Кажется, это работает на трекпадах для меня. Он основан на обходном пути radarek.

    if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });

    $('body').keydown(function (e) {
        e.preventDefault(); // prevent the default action (scroll / move caret)
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}

Ответ 5

Идентификатор цели и использование прокрутки вместо этого устраняют проблему.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .className {
        background-attachment: scroll;
    }
}

Ответ 6

Я просто наткнулся на случай, когда мне удалось уменьшить заикание, удалив box-shadow из элементов, перекрывающих фиксированный фон.

Ответ 7

Предыдущий ответ исправил мою проблему в IE11! Однако мне пришлось внести небольшое изменение, чтобы он также обновил страницу с помощью F5 (или Ctrl + F5):

//В IE 11 это устраняет проблему при прокрутке по разрыву фотографии без использования полосы прокрутки

 if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });

    $('body').keydown(function (e) {

        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}

Ответ 8

Используя этот script: fooobar.com/questions/416256/...

Чтобы обнаружить пограничный браузер, я изменил стиль для html и body.

if (document.documentMode || /Edge/.test(navigator.userAgent)) {
   document.documentElement.style.overflow = "hidden";
   document.documentElement.style.height = "100%";
   document.body.style.overflow = "auto";
   document.body.style.height = "100%"; 

}

Ответ 9

Я попробовал решение дважды jr CSS, но он не работает в Edge/15.15063. Даша ответ решил проблему в Edge, но не IE 11. Я заметил, что условие document.documentMode не было завершено. document.documentmode вернет undefined для всех браузеров, за исключением IE 8+, который будет вернуть номер режима. При этом следующий код будет определять как IE 8+, так и Edge и решить проблему с фоновым изображением.

if ((document.documentMode != undefined) || (/Edge/.test(navigator.userAgent))) {
document.documentElement.style.overflow = "hidden";
document.documentElement.style.height = "100%";
document.body.style.overflow = "auto";
document.body.style.height = "100%";}

JS Fiddle для вышеуказанного кода. Это также работает со стрелкой и прокруткой дорожки. Я не рассматривал IE7 -