Because inspection works with a simple click listener on the document, it won't fire for elements that have pointer-events: none in their stylemap. Instead it will inspect the next parent that doesn't have this property. In some cases this makes important styles impossible to reach.
It's hard to get around because this behavior is baked quite deep: even browser's built in dev tools will adhere to it while inspecting and require you to manually drill down deeper using the inspector tree view. Even document.elementFromPoint will have the same result.
Possible solutions:
Transform the page's stylesheets to exclude these properties in the frame, but still show them in the inspection result.
Temporarily disable these rules during inspection
Once full CSS editing capabilities are present, it could warn and suggest to disable this rule, as it's often not needed or even harmful for UX
Show direct descendants of the inspected element in the inspector UI as an alternative way to reach them
Workarounds:
Avoid using this property unless necessary (it has more UX drawbacks)
Disable the rule if you have control over the stylesheet
Use browser dev tools to temporarily disable the property before inspecting
Inwerpsel
commented
1 month ago
Because inspection works with a simple click listener on the document, it won't fire for elements that have
pointer-events: nonein their stylemap. Instead it will inspect the next parent that doesn't have this property. In some cases this makes important styles impossible to reach.It's hard to get around because this behavior is baked quite deep: even browser's built in dev tools will adhere to it while inspecting and require you to manually drill down deeper using the inspector tree view. Even
document.elementFromPointwill have the same result.Possible solutions:
Workarounds: