Safari a：悬停在固定元素中更改同级

Question

我正在为博客制作一个简单的固定 SoMe 共享按钮集。除了 Safari，一切都很好。将鼠标悬停在其中一个按钮上会将兄弟姐妹的背景颜色更改为我在 CSS 中没有指定的颜色。一旦我将包装器从固定更改为相对/静态/绝对，这种行为就会消失。

• 有人遇到过这种情况吗？
• 我做错了吗？
• 如果没有，是否有破解/修复/解决方法？

HTML：

  <div id="share-links">
    <a class="share-twitter" href="#">a</a>
    <a class="share-facebook"href="#">a</a>
    <a class="share-linkedin" href="#">a</a>
  </div>

CSS：

#share-links{
   left:0;
   top:5em;
   position:fixed;
}
#share-links a{
  display:block;
  height:2em;
  width:2em;
  color:white;
  background-color:#a16159;
}
#share-links a:hover{
  background-color:#8a392e;
}

小提琴：https://jsfiddle.net/u6vzq192/26/

Answer 1

我遇到了类似的问题。除了固定之外，其中一个内部元素具有transform:rotate 90 度并具有略微改变其位置的悬停效果（从屏幕一侧拉出）。这个元素和它的兄弟元素的背景颜色是相同的，当页面上的元素被改变/渲染时，两者都会随机闪烁。

我终于找到了完全阻止背景颜色闪烁的样式组合。

我从这里向父元素添加了以下内容：https://stackoverflow.com/a/27863860/6260201

-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;

这停止了转换/滑动元素的闪烁。

我将以下内容添加到此处的剩余元素中：https://stackoverflow.com/a/19817217/6260201

-webkit-backface-visibility: hidden;

这会阻止兄弟元素的背景颜色闪烁。

Answer 2

我在稍微不同的情况下发现了这个问题。我使用您设置的链接在固定 div 中有分页点。我正在使用 Javascript 向链接添加一个类，这反过来会改变背景颜色。每次发生这种情况时，所有其他链接的背景颜色都会变得疯狂。我认为这是 Safari 中的一个渲染错误，当链接的背景发生变化时会反转链接的背景。

在对您的示例进行大量实验后，我发现如果链接本身更大或容器更大，它就会停止。由于将链接设置为巨型按钮会影响设计，因此最好的解决方案似乎是将容器设置为更大。由于您的示例是一组垂直链接，您可以将容器的高度设置为比链接大得多的东西。我使用了height: 100%;，但一个大的px 也应该可以。如果你的链接是水平布局的，你可能需要改成width: 100%;。

CSS：

#share-links{
  left:0;
  top:5em;
  position:fixed;
  height: 100%;
}

#share-links a{
  display:block;
  height:2em;
  width:2em;
  color:white;
  background-color:#a16159;
}

#share-links a:hover{
  background-color:#8a392e;
}