在 Internet Explorer 11 中使用视口(viewport)单位时的 CSS 转换错误

Question

我有一个通过使用 JQuery/JS 更改属性触发的 css 转换。它运行良好，但在 Internet Explorer (11) 中除外。

我不知道这里发生了什么，有什么想法吗？

编辑:问题似乎是由使用视口(viewport)单位引起的。使用任何其他类型的单元时它都可以正常工作。第二个片段显示了一个工作示例。

$('#click').click(function() {
var data_test = $('#container').attr('data-test');
if(data_test == 'one') $('#container').attr('data-test', 'two');
else $('#container').attr('data-test', 'one');
});

#container {
position: relative;
width: 100%; height: 100px;
}

#container > div {
position: absolute;
right: 1vw;
font-size: 1em;
top: 0.1em;
transition: all 1s;
}

#container[data-test="one"] > div {
transform: translate(-8vw, 15vh);
font-size: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" data-test="one"><div>some text</div></div>

  <div id="click">click</div>

$('#click').click(function() {
var data_test = $('#container').attr('data-test');
if(data_test == 'one') $('#container').attr('data-test', 'two');
else $('#container').attr('data-test', 'one');
});

#container {
position: relative;
width: 100%; height: 100px;
}

#container > div {
position: absolute;
right: 1vw;
font-size: 1em;
top: 0.1em;
transition: all 1s;
}

#container[data-test="one"] > div {
transform: translate(-4em, 4em);
font-size: 1.3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" data-test="one"><div>some text</div></div>

  <div id="click">click</div>

Answer 1

不应再在顶部、右侧、底部或左侧进行过渡。为了获得最佳性能，请使用 transform: translateY(value);或转换:translateX(value);。删除顶部 Prop 并转换这些元素。重绘可能搞砸了。让我知道它是否有效;-)