css3 transform: translatex(-100%); not working properly in IE11 & Edge

Question

The container transform: translatex(-100%); moving to transform: translatex(0); in Internet Explorer 11 and Edge not working properly. Content moves but it goes back when touch on mouse.

.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

I think IE11 & Edge do not required prefixes even though I use autoprefixer — Mo., Oct 24 '17 at 13:43
what do you mean by ` not working properly` . the transform works in IE — Mihai T, Oct 24 '17 at 13:59
@MihaiT transformed content goes back to previous status before translation finishing — Mo., Oct 24 '17 at 14:09
That is IEs behaviour. Two workarounds, one is setting `pointer-events:none` on the iframe but then it acts only as a screenshot (*you cannot interact with it*) or you [bubble the event your self](https://stackoverflow.com/a/38442439/128165) but then the iframe's url cross-domain policy allows it. — Gabriele Petrioli, Oct 24 '17 at 14:59

score 1 · Answer 1 · answered Oct 24 '17 at 13:42

1

As mentioned previously, you will need to add a prefix of -ms- for browser support.

For reference, you can use: https://caniuse.com/#search=transform

answered Oct 24 '17 at 13:42

Jack

61
9

IE11 & Edge do not required prefixes even though I use autoprefixer – Mo. Oct 24 '17 at 13:45
prefix `-ms-transform: translatex(-100%); /* IE 9 */` above ie9 doesn't require prefix – Mo. Oct 24 '17 at 13:46
If you add the prefix and inspect element, does it cross out transform and use -ms-transform? – Jack Oct 24 '17 at 13:48
I use `autoprefixer` which does all the prefix jobs – Mo. Oct 24 '17 at 13:51

css3 transform: translatex(-100%); not working properly in IE11 & Edge

1 Answers1