css3 变换: translatex(-100%);在 IE11 和 Edge 中无法正常工作答案

【问题标题】：css3 transform: translatex(-100%); not working properly in IE11 & Edgecss3 变换: translatex(-100%);在 IE11 和 Edge 中无法正常工作
【发布时间】：2017-10-24 22:06:42
【问题描述】：

在 Internet Explorer 11 和 Edge 中容器 transform: translatex(-100%); 移动到 transform: translatex(0); 时无法正常工作。内容会移动，但在触摸鼠标时会返回。

.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

【问题讨论】：

尝试为转换属性使用前缀-ms-。
像这样“-ms-transform: translatex(-100%);”
我认为 IE11 & Edge 不需要前缀，即使我使用了 autoprefixer
您所说的“无法正常工作”是什么意思。转换在 IE 中工作
这是 IE 的行为。两种解决方法，一种是在 iframe 上设置 pointer-events:none，但它仅充当屏幕截图（您无法与其交互）或者您 bubble the event your self 但随后 iframe 的 url 跨域策略允许它.

标签： html css css-transitions css-transforms

【解决方案1】：

如前所述，您需要添加 -ms- 前缀以支持浏览器。

供参考，您可以使用：https://caniuse.com/#search=transform

【讨论】：

IE11 & Edge 不需要前缀，即使我使用 autoprefixer
前缀-ms-transform: translatex(-100%); /* IE 9 */以上ie9不需要前缀
如果添加prefix和inspect元素，是否会划掉transform并使用-ms-transform？
我使用 autoprefixer 来完成所有前缀工作