Exploring the world of CSS animations, I have created a snippet where elements appear sequentially. Take a look at it first:
.wrapper {
pointer-events: none; /* disable pointer events until animation completes */
}
.text {
position: absolute;
}
/* First element starts visible and fades out after 2s */
.first {
opacity: 1;
animation: fade 500ms reverse forwards 2000ms;
}
/* Second element starts 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; /* re-enable pointer events after animation */
}
}<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>In this code snippet, you'll notice that the second element contains a link. By default, the link remains clickable throughout the animation, even when it's not visible due to opacity being set to 0.
To address this, I've implemented a workaround by setting pointer-events: none; on the parent element and then switching it to pointer-events: all; on the children once the animation is complete (inside @keyframes).
While this technique works flawlessly in Chrome and Firefox, it seems to encounter an issue in Safari. Despite setting pointer-events: all;, the link doesn't become clickable at the end of the animation, potentially indicating a bug specific to Safari.
(You can replicate the problem or explore alternative solutions in this CodeSandbox)
Here are some questions that arose as I encountered this issue:
- Could this be a bug inherent to Safari? While browsing through Webkit's issue tracker, no pertinent information was found (despite numerous other
pointer-eventsrelated bugs). - Is there a way to resolve this Safari-specific behavior without resorting to JavaScript?
I appreciate any insights you may have!
Edit
After further investigation, I came across a potential solution for Safari involving the use of visibility: hidden; instead of manipulating pointer-events, which is detailed below.
Additionally, upon testing my code with Playwright (an automated testing tool capable of launching a headless WebKit browser), the pointer-events bug did not manifest. This raises the question of whether the issue is exclusive to Safari rather than being a broader WebKit concern. Further clarification on this matter would be greatly appreciated!