Samsung S4圆角Bug

Samsung S4 手机在 Android Browser4.4.2 上（其他版本未测），如果你使用了 border-radius，并且使用了 -webkit-transform 属性，当使用了 translatez 或者 translate3d 值，圆角会出现问题：

  1. .test {
  2.     border: 2px solid red;
  3.     width: 50px;
  4.     height: 50px;
  5.     border-radius: 50%;
  6.     background-color: gray;
  7.     box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  8.     -webkit-transform: translate(0, 0) translatez(0);
  9.     transform: translate(0, 0) translatez(0);
  10. }
  1. <div class="test"></div>

如上代码，-webkit-transform: translate(0, 0) translatez(0) 将会导致圆角无法包裹住 background-color。

当然，-webkit-transform: translate3d(0, 0, 0) 也是一样的，所以如果你的某个场景是这样的，那么可以直接使用 -webkit-transform: translate(0, 0) 来避免这个问题。