HTML Guide for pointer-events

CSS: “pointer-events”: “normal” is not a “pointer-events” value.

The issue you’re encountering is due to incorrect use of the pointer-events CSS property value. The W3C Validator indicates that normal is not a valid value for pointer-events.

How to Fix

The pointer-events property accepts specific valid values, and while “normal” is not one of them, the correct relevant value you likely intended to use is auto.

Valid Values for pointer-events

Here are the most common valid values for pointer-events:

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

Example Fix

If your original CSS is like this:

<style>
  .my-element {
    pointer-events: normal; /* This is incorrect */
  }
</style>

You should change it to:

<style>
  .my-element {
    pointer-events: auto; /* This is correct */
  }
</style>

Summary

To resolve the W3C Validator issue, replace any occurrence of pointer-events: normal; with pointer-events: auto; or another appropriate value based on the desired behavior.