重叠形状及其悬停样式

Question

设置

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

问题

当形状的透明部分与其他元素中的文本重叠时，此悬停样式会导致问题，从而导致文本中出现明显的角落。

由于问题很难用单词解释，这里有一个突出显示故障的屏幕截图。

行为

我认为这只是一个仅限于webkit的问题，因为它出现在Chrome中，但不会出现在Firefox中。值得注意的是，我正在Linux Mint系统上测试它。

当您将鼠标悬停在小github六边形上并在退出十六进制时保持不变时，会出现此问题。只有当大徽标六边形悬停在上方时才能解决问题。奇怪的是，如果你从徽标hex转移到github hex，只有当你退出 github hex时才会出现问题。

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

代码

我正在使用SASS，指南针和自定义mixins。我已经包含了一个针对违规十六进制的已编译样式的片段。如需更全面的摘录，请参阅上面的小提琴。

.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;
}

注意：对于我从谷歌字体导入的小提琴，但对于我的项目，我有一个自定义的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的错误，而且这个属性只是解决它的机会。如果有人对错误的原因或此解决方案的工作原因有更好的理解，请对此答案发表评论。