CSS - Safari 中的过渡不平滑答案

【问题标题】：CSS - Transition not smooth in safariCSS - Safari 中的过渡不平滑
【发布时间】：2016-12-24 05:23:02
【问题描述】：

字体大小的简单转换会导致在 safari 中出现卡顿，而在 chrome 和 firefox 中却很流畅。这是 Safari 问题、webkit 问题还是其他问题？感谢任何黑客攻击。

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;
}

&lt;input type="text" placeholder="hello" value="hello"&gt;&lt;/input&gt;

【问题讨论】：

标签： html css safari transition

【解决方案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;
}

&lt;input type="text" placeholder="hello" value="hello" /&gt;

【讨论】：

没有任何区别
您是否删除了浏览器捕获
击败我，看起来效果不错，投给那个！ :)
@AnuragDaolagajao 你现在可以检查一下吗，我发现问题是什么，旧版本的 safari 无法获取视口高度和视口宽度
不要更改字体大小