Safari 不重绘被剪辑路径隐藏的元素

【问题标题】：Safari not redrawing elements hidden by clip-pathSafari 不重绘被剪辑路径隐藏的元素
【发布时间】：2017-04-03 04:00:51
【问题描述】：

我遇到了一个奇怪的 safari bug，它使某些元素在悬停之前不可见。

这是由先前使用剪辑（剪辑路径）隐藏的元素引起的。 Safari 仅在悬停效果更改其设计并因此迫使 safari 重新绘制对象后才重新绘制它们。

.logo-container {
  position: absolute;
  top: 0px;
  clip: rect(0, auto, auto, 0);
  clip-path: inset(0, auto, auto, 0);
}

【问题讨论】：

标签： css safari clip-path

【解决方案1】：

为了解决这个问题，我使用了一个重复的 css 动画来强制 safari 每秒重绘元素几次。

@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 0.01px;}
}

.logo-container {
  position: absolute;
  top: 0px;
  clip: rect(0, auto, auto, 0);
  clip-path: inset(0, auto, auto, 0);
  -webkit-animation: mymove 0.1s infinite; /* Safari 4.0 - 8.0 */
}

现在元素被重绘，可见性按预期工作。

如果有更好的解决方案，请回答这个问题:)

【讨论】：