Question

字体大小的简单转换导致在safari中出现口吃，因为它在chrome和firefox中很流畅。这是一个safari问题，webkit问题还是别的什么？任何黑客都表示赞赏。

＆＃13;

input {
  font-size: 1vw;
  transition: font-size 0.4s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  outline: none;
}
input:focus {
  font-size: 1.2vw;
}

＆＃13;

<input type="text" placeholder="hello" value="hello"></input>

＆＃13;

Answer 1

尝试使用transition:duration

transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;

input {
  font-size: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  outline: none;
  transition-duration:0.4s;
  -webkit-transition-duration:0.4s;
  -ms-transition-duration:0.4s;
  -moz-transition-duration:0.4s;
  visibility:visible !important;
}
input:focus {
  font-size: 30px;
}

<input type="text" placeholder="hello" value="hello" />

CSS - 在Safari中过渡不顺畅

1 个答案: