Question

使用Chrome浏览器在box-shadow上出现奇怪的断断续续/断断续续的过渡。哈文之前没有注意到这一点。 Firefox，IE，Opera按预期执行转换。任何人都有相同的经验，可能还有解决方案吗？

＆＃13;

html {
  text-align: center;
  font: 13px Open Sans;
  color: #5c5c5c
}

a,
input,
button {
display:inline-block;
  margin: 30px auto 0;
  border: 4px solid #dedede;
  background: #f3f3f3;
  padding: 10px 25px;
  text-decoration: none;
  color: inherit;
  line-height:1;
  -webkit-transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
  -moz-transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a:hover,
input:hover,
button:hover {
  -webkit-box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
  -moz-box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
  box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
}

＆＃13;

<h1>I AM AN INPUT</h1>
<p>For some reason unknown to myself, a box-shadow transition<br>on HOVER, executes choppy (stutters). Only experiencing in Chrome so far.</p>
<input type="submit" value="Input">
<a href="#">Fine on Link</a>
<button name="button">
Fine on Button
</button>

＆＃13;

Chrome浏览器中的框阴影过渡不平滑

0 个答案: