是Safari中的border-radius错误吗？

Question

在Safari中，应用:hover样式会导致重新绘制错误。它是Safari中的错误吗？

• Safari版本：11.0.3（11604.5.6.1.1）
• UserAgent：Mozilla / 5.0（Macintosh; Intel Mac OS X 10_11_6）AppleWebKit / 604.5.6（KHTML，与Gecko一样）Version / 11.0.3 Safari / 604.5.6

＆＃13;

＆＃13;

a:hover {
  text-decoration: none;
}

.outer {
  width: 300px;
  border: 3px solid red;
  border-radius: 30px;
  overflow: hidden;
}

.inner {
  display: block;
  width: 100%;
  height: 100%;
  background: yellow;
}

＆＃13;

<div class="outer">
  <a href="javascript:void 0" class="inner">hello</a>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle ：https://jsfiddle.net/z71z5jov/

Answer 1

是的，这是一个错误，我认为它足够大，以便他们很快会注意到，但是，如果没有打开欺骗，你可能想在他们的issue tracker _{上打开一个问题但}

只是在黑客攻击之前的一个注释：这不仅发生在悬停时，even triggering the repaint by js确实重现了问题，而且不仅在<a>元素上，甚至更奇怪，它在一段时间后自行修复。

所以，现在，黑客的解决方法：

在内部元素上设置透明border似乎可以防止错误...

a:hover {
  text-decoration: none;
}

.outer {
  width: 300px;
  border: 3px solid red;
  border-radius: 30px;
  overflow: hidden;
}

.inner {
  display: block;
  width: 100%;
  height: 100%;
  background: yellow;
  border: solid 1px transparent; /* Safari workaround */
  margin: -1px; /* counter-act the workaround */
}

<div class="outer">
  <a href="javascript:void 0" class="inner">hello</a>
</div>