重叠的形状及其悬停样式

Question

设置

我有一系列使用带边框的伪元素创建的重叠 CSS 六边形。我有悬停样式来改变形状的颜色。

问题

当形状的透明部分与其他元素中的文本重叠时，这种悬停样式会导致问题，从而导致文本中的可见角被切掉。

由于这个问题很难用文字来解释，这里是一个突出显示故障的屏幕截图。

行为

我认为这只是一个 webkit 问题，因为它出现在 Chrome 中，而不是 Firefox 中。值得注意的是，我正在 Linux Mint 系统上对此进行测试。

当您将鼠标悬停在小 github 六边形上时会出现该问题，并在您退出该六边形时仍然存在。仅当将大徽标六边形悬停在上方时，此问题才得以解决。奇怪的是，如果您将鼠标从 logo hex 悬停到 github hex，那么问题只会在您 exit github hex 时出现。

我整理了一个简化的小提琴来演示这个问题： http://jsfiddle.net/chicgeek/JRAn5/

代码

我正在使用 SASS、指南针和自定义 mixin。我已经为有问题的十六进制包含了一个已编译样式的 sn-p。如需更完整的摘录，请参阅上面的小提琴。

.social.github {
    top:1.96875em;
    left:2.0625em;
    display:inline-block;
    text-align:center;
    width:0;
    line-height:0;
}
.social.github:before, .social.github:after {
    position:absolute;
    left:-1em;
    width:1em;
    border:0 solid transparent;
    border-width:0.866em 0.5em;
    content:'';
    z-index:-1
}
.social.github:before {
    border-bottom-color:#c3c3c3;
    border-top:0;
    bottom:0;
}
.social.github:after {
    border-top-color:#c3c3c3;
    border-bottom:0;
    top:0;
}
.social.github:hover:before {
    border-bottom-color:#675e5e;
}
.social.github:hover:after {
    border-top-color:#675e5e;
}

注意：对于我从 Google 字体导入的小提琴，虽然对于我的项目，我有一个自定义 icomoon 字体。该错误发生在任一来源。

解决方案..？

您以前遇到过这个问题吗？你有几分钟玩上面的小提琴代码吗？您对我可以尝试的策略有什么建议吗？

如果有助于诊断此问题，我很乐意提供更多代码。提前致谢！

---

更新

1. 一位朋友建议这可能是字体引擎的问题。当 .woff 被禁用时，剪裁解决。 [source]
2. 该问题在 Chrome 33（Linux、OSX）、Safari (OSX) 以及 Chrome 31 (Win7) 上很明显。在 Chrome 33 (Win7) 上不会出现此问题。

Answer 1

我向一些同事询问了我的问题。其中一位建议在徽标元素上应用-webkit-backface-visibility: hidden;。巫毒，它奏效了。

这是显示修复的修改后的小提琴： http://jsfiddle.net/chicgeek/JRAn5/8/

现在的问题是，这个不应该工作，因为-webkit-backface-visibility 是一个专门用于 3D 变换的属性。虽然我不知道问题的具体原因，但我相信我的问题是一个特定于 webkit 的错误，这个属性解决它只是偶然的机会。如果有人对错误的原因或此解决方案有效的原因有更好的了解，请对此答案发表评论。