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显示其他元素上方的背景

回答

相关问题