Microsoft Edge顯示其他元素上方的背景

我正試圖解決本網站上的問題。（http://www.yunke.es）Microsoft Edge顯示其他元素上方的背景

在IE（10,11）和（Chome，Firefox等）中可以正常工作，但在Edge中，不同部分的背景隱藏在整個網絡中，並且不可能訪問內容（文本和圖像）我已經完成了更改Css屬性的測試...例如「位置」，但運行不正常。任何想法？

#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

來源

2016-08-02 Ral

如果您希望人們協助，請分享HTML/CSS。 –

好的，完成了！謝謝 – Ral

微軟邊緣似乎與使用像素爲單位的財產translate3d一個Bug。在「％」中轉換「px」將解決問題。

來源

2016-08-02 19:40:46

你是如何得出結論的？如果你有減少，請考慮發佈在http://bugs.microsoftedge.com。 – Sampson

我在項目中遇到了同樣的問題，並使用「％」而不是px來修復它。我並不在乎Bug的邊緣，因爲我從來沒有見過由微軟完成的合適的瀏覽器;-)。 Edge開發人員必須測試瀏覽器本身 –

我是Edge團隊的一名工程師;我們徹底地測試。但是我也會觀察Stack Overflow，以瞭解我們沒有涉及的任何場景，以便我們可以隨着時間改進。 – Sampson

Microsoft Edge顯示其他元素上方的背景

回答

相關問題