是Safari中border-radius的bug?

中村康司

在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)版本/11.0.3 Safari / 604.5.6

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;
}
<div class="outer">
  <a href="javascript:void 0" class="inner">hello</a>
</div>

jsfiddle https : //jsfiddle.net/z71z5jov/

海道

是的,这是一个bug,我相信它足够大,因此他们很快就会注意到,但是,如果尚未打开任何骗子,您可能希望在其问题跟踪器 上打开一个问题

hack之前的一个提示:这不仅会在悬停时发生,甚至通过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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档