css - 悬停效果后 Mac 上的 Safari 不更新/重绘

Question

我遇到了一个带有悬停效果的特定于 safari 的问题: 当用户在一个圆上移动时，另一个圆应该出现在它上面(偏移)。

这是有效的，但是当用户将光标从圆圈上移开时，悬停圆圈的一部分仍然存在，直到浏览器重绘该站点(不确定“重绘”是否是正确的术语)。例如，您可以使用 Cmd+A 来选择所有文本。悬停 - 剩余物将消失。

我认为一个例子最能说明问题: http://jsfiddle.net/L81h9hjr/3/

<div class="wrap">
  <h1><a href="#"><span>Reply<span>Our services</span></span></a></h1>
</div>

该示例在我测试过的其他浏览器中运行完美，因此您需要 Mac Safari(我试过 8.0.6)。

Answer 1

这是 Safari/webkit 的重绘/重绘问题(不确定为什么只在 Safari 而不是 Chrome)。

我通过将 jQuery 事件附加到悬停元素来解决这个问题，该事件强制它的周围/父元素重绘(在我的例子中，一个 hide() 然后一个 show(0))。

  $('.hover-element').on('mouseleave',function(){
    $(this).parents(".containing-element").hide().show(0);
  });

确保您使用的是 show(0) 而不仅仅是 show()，出于某种原因，如果没有动画参数，普通的旧 show() 不会被触发。