这是一个IE特有的bug,我正在寻找解决方法。
当我对一个文本输入框应用CSS transform: translate
,并且该输入框获得焦点,在transition
设置为有效值时,光标仍停留在旧位置,而元素已经移动。
一旦你开始输入,它就会移动到正确的位置,但在此之前,光标顽固地闪烁在旧位置。
这段代码说明了问题......再次强调,这是一个IE特有的bug。
var toggleTop = function(){
$('.input-container').toggleClass('top');
$('#the-input').focus();
}
$('#the-button').click(toggleTop);
.input-container {
top: 100px;
left: 100px;
position: fixed;
transition: all 1s;
}
.input-container.top {
transform: translateY(-100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-container'>
<input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>