css3 transform: translatex (-100%); funktioniert nicht richtig in IE11 & Edge

Der Container transform: translatex(-100%); verschiebt zu transform: translatex(0); in Internet Explorer 11 und Edge nicht ordnungsgemäß funktioniert. Inhalt bewegt sich, aber es geht zurück, wenn Sie die Maus berühren.css3 transform: translatex (-100%); funktioniert nicht richtig in 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); 
}

Demo: https://codepen.io/anon/pen/MEMKKL

Quelle

2017-10-24 Muhammed

Try Präfix '-ms-' zu verwenden, für die Eigenschaft verwandeln. –

Wie diese "-ms-transform: translatex (-100%);" –

Ich denke, IE11 & Edge benötigt keine Präfixe, obwohl ich autoprefixer – Muhammed

Wie bereits erwähnt, müssen Sie ein Präfix von -MS- für Browser-Unterstützung hinzuzufügen.

Als Referenz können Sie: https://caniuse.com/#search=transform

Quelle

2017-10-24 13:42:27 Matthew

IE11 & Edge benötigt keine Präfixe, obwohl ich autoprefixer – Muhammed

Präfix '-ms-transform: translatex (-100%);/* IE 9 */'über IE9 benötigt kein Präfix – Muhammed

Wenn Sie das Präfix- und Inspektionselement hinzufügen, wird es durchgestrichen und -ms-transform verwendet? – Matthew

css3 transform: translatex (-100%); funktioniert nicht richtig in IE11 & Edge

Antwort

Verwandte Themen