Element flickering occurs when hovering over an element with an animation present

Question

Element flickering occurs when hovering over an element with an animation present

I'm currently working on a hover navigation, which was functioning properly until I introduced animations. Now, whenever there is an animation involving movement, it seems to flicker when hovered over.

Here is the code causing the issue. When I remove the animation I added, everything works as expected:

.hide {
  display: none;
}

.hover {
  position: absolute;
  display: block;
  width: 200px;
  height: 200px;
  background: grey;
}

.hover:hover+.hide {
  display: inline-block;
  background: #fff;
  position: absolute;
}

@keyframes animation {
  0% {
    font-size: 14px;
  }
  100% {
    font-size: 15px;
  }
}

.animationexample {
  animation: animation 1s infinite;
  position: absolute;
  top: 0;
  right: 0;
}

<p class="animationexample">Animation</p>

<p class="hover">
  Hover over this
  <p class="hide">Now hover over this</p>
</p>

html css

Answer 1

Answer №1

After adding pointer-events: none to the CSS rule for .hide, I noticed that the flickering problem was resolved. It seems like the hover effect is now functioning properly as well. Hopefully, this adjustment has resolved all of the issues.

By applying the CSS property pointer-events: none to the .hide element, it ensures that the element will not intercept mouse events, allowing these events to pass through and reach elements located underneath.

.hide {
    display: none;
    pointer-events: none;
}

Answer 2

After adding pointer-events: none to the CSS rule for .hide, I noticed that the flickering problem was resolved. It seems like the hover effect is now functioning properly as well. Hopefully, this adjustment has resolved all of the issues.

By applying the CSS property pointer-events: none to the .hide element, it ensures that the element will not intercept mouse events, allowing these events to pass through and reach elements located underneath.

.hide {
    display: none;
    pointer-events: none;
}

Answer 3

Answer №2

This answer is left open-ended in the hopes that someone with a deep understanding of how animation works can provide further insights and explanations.

An important observation is that the two elements are not nested, despite appearing so in the HTML layout. Your CSS correctly accounts for this by using a + selector instead of >.

When the .hide element is hovered above (in the z-direction) the .hover element, it prevents the .hover element from detecting the hover event.

Initially, when no hovering occurs, .hide is set to display: none and remains invisible without taking up any space.

When .hover is hovered over, .hide changes to display: inline and position: absolute, causing it to overlay .hover due to its position in the DOM hierarchy. This temporary overlay prevents .hover from registering the hover event until .hide reverts back to display: none and removes its absolute positioning.

The lack of flickering, even without unrelated animations, may be attributed to timing and repaint considerations within the system.

If an animation is ongoing, the system triggers a repaint as soon as the position of .hide is altered.

However, if there are no active animations, the system delays the repaint process, allowing the transition of .hide's position to occur within a single frame without causing flickering.

A clearer explanation on how CSS animations handle such scenarios would greatly benefit this discussion.

For reference, the link https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate delves into animation sequences but overlooks cases involving changes in position and display values.

In agreement with @BrendanMorel, setting pointer-events to none effectively resolves the issue of .hide intercepting the hover events.

Answer 4