[Story tooltip] Pointer events don't get triggered if upper grid-layer covers page

Description

Introduced in #18945 there is a CSS rule that should allow clicking on a grid-layer that’s not first in the stack of layers on a page. However, if the foreground layer has anything (eg: a div) covering the whole page, then it will block the clicks, even if that element should not be clickable. The properties have !important so they cannot be overriden by publishers.

amp-story-grid-layer {
  pointer-events: none !important;
}
amp-story-grid-layer * {
  pointer-events: auto !important;
}

<amp-story-grid-layer>
  <div class="full-page center-div">
    <a href="https://clickonbackgroundlayer.com"><p>Cannot be clicked</p></a>
  </div>
</amp-story-grid-layer>
<amp-story-grid-layer layout="fill">
  <div style="width:100%;height:100%;position:absolute;left:0;top:0">
    <a href="https://clickonforegroundlayer.com"><p>Can be clicked</p></a>
  </div>
</amp-story-grid-layer>

Potential fixes

• [Preferred] We can set pointer-events: auto to only the elements that are interactive (tooltips, amp-twitter, amp-story-interactive). This will involve removing the rule amp-story-gid-layer * {pointer-events: auto !important} but adding pointer-events: auto on the elements that are supposed to be clickable.
• We can make the CSS rule not !important so it can be overriden

[mszylkowski]

That is set on amp-story-grid-layer {pointer-events: none !important}, I can check if that attribute is not propagated

[mszylkowski]

I’m working on a solution to automatically set the correct pointer-events to the correct values, given the small number of valid elements that are clickable in a grid-layer (they are: interactive components, links, shopping tags, amp-twitter).