Microsoft Edge가 다른 요소 위에 배경을 표시합니다.

Question

이 웹 사이트에서 문제를 해결하려고합니다. (http://www.yunke.es)

IE (10, 11) 및 (Chome, Firefox 등)에서는 잘 작동하지만 Edge에서는 웹 전체에 숨겨진 다른 섹션의 배경이 있으며 콘텐츠 (텍스트 및 이미지)에 액세스 할 수 없습니다.) CSS 속성을 변경하는 테스트를 수행했습니다 ... 예를 들어 "position"과 같이 잘 작동하지 않습니다. 어떤 생각?

#backgrounds { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: -webkit-transform .6s ease-out; 
 
    -moz-transition: -moz-transform .6s ease-out; 
 
    -ms-transition: -ms-transform .6s ease-out; 
 
    -o-transition: -o-transform .6s ease-out; 
 
    transition: transform .6s ease-out; 
 
    background: url(../img/loader.gif) no-repeat center center #000; 
 
} 
 

 
#contents, #layer-1, #layer-2 { 
 
    visibility: hidden; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    -webkit-transition: -webkit-transform .6s ease-out; 
 
    -moz-transition: -moz-transform .6s ease-out; 
 
    -ms-transition: -ms-transform .6s ease-out; 
 
    -o-transition: -o-transform .6s ease-out; 
 
    transition: transform .6s ease-out; 
 
}

<div id="backgrounds" style="transform: translate3d(0px, 0px, 0px);"> 
 
\t <article class="item-0" style="height: 773px;"></article> 
 
\t <article class="item-1" style="height: 773px; background-position: 0px 0px;"></article> 
 
\t <article class="item-2" style="height: 1161px;"></article> 
 
\t <article class="item-3" style="height: 773px;"></article> 
 
\t <article class="item-4" style="height: 773px;"></article> 
 
\t <article class="item-5" style="height: 773px;"></article> 
 
\t <article class="item-6" style="height: 2146px;"></article> 
 
\t <article class="item-7" style="height: 773px;"></article> 
 
\t <article class="item-8" style="height: 773px;"></article> 
 
\t <article class="item-9" style="height: 773px;"></article> 
 
\t <article class="item-10" style="height: 1040px;"> 
 
\t \t <div class="crazy"> 
 
\t \t \t <img src="http://yunke.es/assets/img/background-6-1.png" style="right: -442.013%;"> 
 
\t \t </div> 
 
\t </article> 
 
</div> 
 

 
<div id="contents" style="transform: translate3d(0px, 0px, 0px); visibility: visible;"> 
 
\t 
 
\t <article class="item-0" style="height: 927.6px;"></article> 
 
\t 
 
\t <article class="item-1" style="height: 927.6px;"> 
 
\t \t <div class="mask" style="height: 773px; transform: translate3d(0px, -309.2px, 0px);"> 
 
\t \t \t <img class="masked" src="http://yunke.es/assets/img/background-2-1.png" style="transform: translate3d(0px, 309.2px, 0px);"> 
 
\t \t </div> 
 
\t \t <div class="mask" style="height: 773px; transform: translate3d(0px, -309.2px, 0px);"> 
 
\t \t \t <img class="masked eyes-open" src="http://yunke.es/assets/img/background-2-2.png" style="visibility: hidden; transform: translate3d(0px, 309.2px, 0px);"> 
 
\t \t </div> 
 
\t </article> 
 
</div> 
 
\t

Answer 1

마이크로 소프트 가장자리 픽셀 단위를 사용하여 속성 translate3d 버그를 갖고있는 것 같아요. "px"를 "%"로 변환하면 문제가 해결됩니다.