Safari a:hover changing sibling in fixed element

Question

I am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.

Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?

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

Fiddle: https://jsfiddle.net/u6vzq192/26/

God, this issue is so stupid and annoying! I'm glad someone else ran into it. I thought I was going crazy. — Art Geigel, Aug 16 '16 at 00:29

score 1 · Answer 1 · answered May 13 '16 at 19:31

I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.

After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.

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

I had 4 divs next to each other each a different background color with a css :hover class changing the background color. In Safari when I hovered it would change all the other div's background color. Once I resized the containing div's height by about 5 pixels it then rendered correctly. — Art Geigel, Aug 16 '16 at 00:31

score 1 · Answer 2 · edited May 23 '17 at 12:01

I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.

I finally found a combination of styles that stopped the background colour flickering altogether.

I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201

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

That stopped the flickering of the transformed/sliding element.

And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201

-webkit-backface-visibility: hidden;

This then stopped the flickering of the background colour for the sibling element.

Safari a:hover changing sibling in fixed element

2 Answers2