IE 10 및 11에서 마우스 휠로 스크롤할 때 고정된 배경이 점프합니다.

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에서 배경을 계속 유지하는 솔루션이 있습니까?

---

답변이 조금 늦었다는 것을 알고 있지만 동일한 문제가 있었고 이러한 속성을 내 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 ( 오버플로: 자동, 스크롤 이벤트 발생) - Dan Abrey

따라서 프로젝트에 몇 가지 문제가 발생할 수 있습니다. 그러나 IE에서 이 버그를 해결할 수 있는 다른 방법이 없습니다.

---

이것은 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-인덱스: 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>

고칠 수 있지만 약간의 조정이 필요합니다!

---

해결 방법은 다음과 같습니다(Windows 8.1에서 테스트됨).

"background" CSS 속성을 BODY 요소로 이동합니다 . 현재 id="filler"인 DIV 요소에 있습니다. 결과 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;
    }

---

try to turn off smooth scrolling option.

Internet Options - Advenced Tab - Use Smooth Scrolling

it's like rendering bug.... MS IE team is investigating....

---

The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.

(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).

---

just simply define body container to relative.

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

ReferenceURL : https://stackoverflow.com/questions/19377810/ie-10-11-make-fixed-backgrounds-jump-when-scrolling-with-mouse-wheel