Descktop Web IE 브라우저 background-attachment fixed 버그 이슈

IE 브라우저 background-attachment:fixed 버그 이슈

background-attachment:fixed 속성 사용시 IE 브라우저에서 버그가 발생한다.

edge에서 배경이 사라지는 현상 이였고, IE11(확인한 브라우저가 IE11이였지만 하위버전에서도 발생)에서 화면이동시(마우스 휠 또는 키보드 사용시) 버벅임? 또는 화면떨림이 발생하는 현상이다.

해결방안

CSS
ie, edge에서 background attachment 속성 사용 했을때 튀는현상 해결방법(부분해결)

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

이를 임시방편으로 해결하는 방법은 아래와 같이 html, body 에 속성을 주는 것인데, 주의해야 할 점은 위 방법으로 속성을 주는 경우 문제점은 javascript에서 스크롤 이벤트가 동작하지 않게 된다.

JavaScript
ie background-fixed 튀는현상 현상 해결을 위한 스크립트 (마우스 휠이벤트를 제어하는방식)

if (navigator.userAgent.match(/Trident\/7\./)) { // IE 브라우저 분기 예외 처리
    // 스크롤 이슈 대응
    document.body.addEventListener('mousewheel', function() {
        event.preventDefault();
        
        var wheelDelta = event.wheelDelta;
        var currentScrollPos = window.pageYOffset;
        
        window.scrollTo(0, currentScrollPos - wheelDelta);
    });
    
    // 키보드 방향키 이슈 대응
    document.body.addEventListener('keydown', function(e) {
        e.preventDefault();
        
        var currentScrollPos = window.pageYOffset;
        
        switch (e.which) {
            case 38: // up
                window.scrollTo(0, currentScrollPos - 120);
            break;
            case 40: // down
                window.scrollTo(0, currentScrollPos + 120);
            break;
        }
    });
}