css3 변환 : translatex (-100 %); IE11 및 Edge에서 제대로 작동하지 않습니다.

컨테이너 transform: translatex(-100%);이 Internet Explorer 11 및 Edge에서 transform: translatex(0);으로 이동하면 제대로 작동하지 않습니다. 내용은 움직이지만 마우스를 터치하면 되돌아갑니다.css3 변환 : translatex (-100 %); IE11 및 Edge에서 제대로 작동하지 않습니다.

.widget { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    background-color: #fff; 
    border-radius: 4px; 
    transition: all 1.5s; 
    max-height: 400px; 
    left: 0; 
    transform: translatex(-100%); 
} 
.widget:hover { 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
    transform: translatex(0); 
}

데모 : https://codepen.io/anon/pen/MEMKKL

출처

2017-10-24 Muhammed

시도가 접두사'-ms을-'사용하는 변환 속성. –

이처럼 "-ms-transform : translatex (-100 %);" –

autoprefixer를 사용하더라도 IE11과 Edge는 접두어를 필요로하지 않는다고 생각합니다. – Muhammed

앞서 언급 한 바와 같이, 당신은 브라우저 지원 -ms-의 접두사를 추가해야합니다.

참고로, 당신은 사용할 수 있습니다 : https://caniuse.com/#search=transform

출처

2017-10-24 13:42:27 Matthew

자동 접두어 – Muhammed

접두어'-ms-transform : translatex (-100 %);를 사용하더라도 IE11 및 Edge는 접두어가 필요하지 않습니다./* IE 9 * /'위의 ie9는 접두어를 필요로하지 않습니다. – Muhammed

접두어와 검사 요소를 추가하면 변환을 거치고 -ms-transform을 사용합니까? – Matthew

css3 변환 : translatex (-100 %); IE11 및 Edge에서 제대로 작동하지 않습니다.

답변

관련 문제