动画后收到 pointer-events 的 link 在 Safari 中不可点击

Question

我正在使用 CSS 动画文本，其中元素一个接一个地出现。先试试看我的意思：

.wrapper {
  pointer-events: none; /* remove pointer events from elements before they animate */
}

.text {
  position: absolute;
}

/* The first element starts off visible and fades out after 2s */
.first {
  opacity: 1;
  animation: fade 500ms reverse forwards 2000ms;
}

/* The second element starts off hidden and fades in after 3s */
.second {
  opacity: 0;
  animation: fade 500ms forwards 3000ms;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    pointer-events: all; /* add pointer events to elements after they finish animating */
  }
}

<div class="wrapper">
  <h1 class="text first">Wait 2 seconds...</h1>
  <h1 class="text second">Now <a href="https://example.com">click</a></h1>
<div>

正如您在代码片段中看到的，第二个元素有一个 link。默认情况下，它在整个动画过程中都是可点击的，即使它的不透明度仍然是 0.

我希望 link 只有在出现时才可点击，所以我在 parent 元素上设置 pointer-events: none;，在 [=61 上设置 pointer-events: all; =] 在他们完成动画后（在 @keyframes）。

这在 Chrome 和 Firefox 中效果很好，但在 Safari 中效果不佳：link 在动画结束时无法点击。 parent 的 pointer-event: none; 规则不会被更具体的 pointer-events: all; 规则覆盖，该规则应在动画结束时应用于元素本身。

（您可以重现该问题或在 this CodeSandbox 中进行分叉）

这是我的问题：

这是 Safari 的错误吗？我检查了 Webkit's issue tracker 但找不到任何似乎相关的内容（不过还有很多其他 pointer-events 错误）。
有没有一种方法可以在 Safari 中实现此功能而无需诉诸 JavaScript？

提前致谢！

编辑

我通过使用 visibility: hidden; 而不是禁用 pointer-events 找到了适用于 Safari 的，已在下方发布。

我注意到的另一件事是，当我使用 Playwright（一种可以启动无头 webkit 浏览器的测试自动化工具）测试我的代码时，我无法重现 pointer-events 错误，所以我想知道这是否只是 Safari 的问题，而不是 webkit 本身的问题。我仍然想知道这是否是已知行为！

Answer 1

这是我寻求的解决方案，它也适用于 Safari：

.text {
  position: absolute;
}

/* The first element starts off visible and fades out after 2s */
.first {
  opacity: 1;
  visibility: visible;
  animation: fade 500ms reverse forwards 2000ms;
}

/* The second element starts off hidden and fades in after 3s */
.second {
  opacity: 0;
  visibility: hidden;
  animation: fade 500ms forwards 3000ms;
}

@keyframes fade {
  from {
    opacity: 0; /* We still need opacity to animate on */
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

<div>
  <h1 class="text first">Wait 2 seconds...</h1>
  <h1 class="text second">Now <a href="https://example.com">click</a></h1>
<div>

我们可以使用 visibility: hidden; 来确保 link 在应该可以点击之前不可点击，而不是禁用 pointer-events。

动画后收到 pointer-events 的 link 在 Safari 中不可点击

A link that receives pointer-events after animating isn't clickable in Safari

html

css

safari

css-animations

pointer-events

编辑