amphtml: [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 ruleamp-story-gid-layer * {pointer-events: auto !important}
but addingpointer-events: auto
on the elements that are supposed to be clickable. - We can make the CSS rule not
!important
so it can be overriden
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 25 (25 by maintainers)
That is set on
amp-story-grid-layer {pointer-events: none !important}
, I can check if that attribute is not propagated