动画后接收指针事件的链接在 Safari 中不可点击答案

【问题标题】：A link that receives pointer-events after animating isn't clickable in Safari动画后接收指针事件的链接在 Safari 中不可点击
【发布时间】：2021-07-06 20:03:23
【问题描述】：

我正在使用 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>

正如你在 sn-p 中看到的，第二个元素有一个链接。默认情况下，它在整个动画中都是可点击的，即使它的不透明度仍然是0。

我希望链接只有在出现时才可点击，所以我在父元素上设置pointer-events: none;，在子元素完成动画后设置pointer-events: all;（在@keyframes中）。

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

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

这是我的问题：

这是一个 Safari 错误吗？我浏览了Webkit's issue tracker，但找不到任何似乎相关的内容（不过还有很多其他pointer-events 错误）。
有没有办法让这项工作在 Safari 中不借助 JavaScript？

提前致谢！

编辑

我通过使用visibility: hidden; 而不是禁用指针事件为 Safari 找到了a solution，发布在下面。

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

【问题讨论】：

标签： html css safari css-animations pointer-events

【解决方案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>

除了禁用pointer-events，我们还可以使用visibility: hidden; 来确保链接原本应该是不可点击的。

【讨论】：