Mac 上的 Safari 在悬停效果后未更新/重绘

Question

我遇到了一个关于悬停效果的 safari 特定问题：当用户移动到一个圆上时，另一个圆应该出现在它上面（偏移量）。

这有效，但是当用户将光标移出圆圈时，部分悬停圆圈仍然存在，直到浏览器重新绘制站点（不确定 "redraw" 是否正确）。例如，您可以使用 Cmd+A 来 select 所有文本。然后 hover--leftovers 就会消失。

我认为一个例子最能说明问题： 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 的一个 repaint/redraw 问题（不确定为什么只在 Safari 而不是 Chrome）。

我通过将 jQuery 事件附加到悬停元素来解决这个问题，该事件迫使它的 surrounding/parent 元素重绘（在我的例子中，一个 hide() 然后一个 show(0) ).

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

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

Safari on Mac not updating / redrawing after hover effect