CSS3 필터가 가장자리에서 작동하지 않습니다.

Question

이 페이지를 확인하십시오. http://www.urbansportsleague.org/gallery 가장자리에 검은 색 공백이 표시됩니다.

아래 코드는 귀하가 확인하고 알려주는 코드입니다.

미리 감사드립니다.

.gallery-img { 
 

 
    height: 250px; 
 

 
    padding: 10px; 
 

 
    -webkit-filter: blur(0.5px); 
 

 
} 
 

 
.gallery-img>img { 
 

 
    max-height: 200px; 
 

 
    width: auto; 
 

 
    -webkit-transform: rotateY(180deg); 
 

 
} 
 

 
.gallery-img>img:hover { 
 

 
    -webkit-filter: contrast(150%); 
 

 
    /* Chrome, Safari, Opera */ 
 

 
    filter: contrast(150%); 
 

 
}

<div class="col-md-4 col-sm-6 gallery-img"> 
 
    <img class="img img-thumbnail" src="http://www.urbansportsleague.org/assets/gallery/1.jpg" /> 
 
</div> 
 
<div class="col-md-4 col-sm-6 gallery-img"> 
 
    <img class="img img-thumbnail" src="http://www.urbansportsleague.org/assets/gallery/2.jpg" /> 
 
</div>

Answer 1

CSS 필터는 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/에서 자신의 설명서에 따라 에지에 의해 지원됩니다. 2015 년 11 월 업데이트 이후 지원이있었습니다.

흥미롭게도 필터는 나를 위해 작동하지만 http://www.urbansportsleague.org/gallery에서 .gallery-img > img의 -webkit-transform: rotateY(180deg); 규칙을 제거하지 않으면 작동하지 않습니다. 이 모든 것이 결합 될 때 Edge가 약간 버그가 될 수 있습니까? 그리고 예, Edge는 또한 -webkit-transform을 읽습니다. 왜냐하면 많은 웹 사이트가 동일한 transform 규칙을 포함하지 않기 때문입니다.

또한 필터 동작에 영향을 미치지 않아야하는 다른 CSS를 제거하려고했습니다. 부트 스트랩과 배경을 제거한 후에는 필터가 대부분 올바르게 작동하는 페이지가 파손 된 상태가되었습니다. 아직도 때로는 이미지가 사라졌습니다. 때로는 필터가 이미지에 몇 초 동안 적용된 직후 이미지가 사라졌습니다.