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

我在稍微不同的情况下发现了这个问题。我使用你设置的链接在固定的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;
}

Answer 2

我遇到了类似的问题。除了固定之外，其中一个内部元素有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;

然后停止了兄弟元素背景颜色的闪烁。

Safari a：在固定元素中悬停改变兄弟姐妹

2 个答案: