`position: fixed` elements having parent with `pointer-events: none` mistakenly display as not visible / covered by another el #6675

josh-byster · 2020-03-08T10:07:07Z

Current behavior:

Hi,
Currently, when testing out the visibility of .spinner for nprogress, it shows as being not visible due to the position being fixed although the spinning circle loader is certainly visible on the page. I'm aware of the complexity of the current algorithm used to determine visibility so I thought this might help give a simple, reproducible example of where this may (if I'm understanding correctly) fail. It says that it's being covered by the html wrapper itself, but the element has a z-index set to 1031.

Desired behavior:

It should be considered visible as it's not being covered by any element in the DOM.

Test code to reproduce

https://github.com/josh-byster/cypress-visibility

There is a visibility.spec.js which has a basic assertion of visibility in there that should show the issue.
If there's any trouble with reproducibility, it can probably be tested directly at the nprogress website to check if the spinner is visible.

Versions

Cypress 4.1.0
Mac OS X Catalina 10.15.3

The text was updated successfully, but these errors were encountered:

jennifer-shehane · 2020-03-10T06:50:09Z

This seems to be due to the parent element of the position: fixed element having the style pointer-events: none, which makes the element what we would call "not actionable", but it seems to be incorrectly also regarding it as "not visible".

I'm not seeing this ever really working correctly. Tried in 3.3.0, 3.4.0, 3.5.0, 4.1.0.

Reproducible Example:

index.html

<html>
<body>
  <div style="pointer-events: none;">
    <div class="spinner" style="position: fixed;">↺<div/>
  </div>
</body>
</html>

spec.js

it('pointer events on fixed element', () => {
  cy.visit('index.html')
  cy.get('.spinner').should('be.visible')
})

Why

Seems to be a note from brian a long time ago regarding this #1887 (comment):

It's because setting pointer-events: none changes how the browser yields elements via document.elementFromPoint.

In that case the element is "falling through" which triggers Cypress into thinking its being covered up. There's a note / documentation somewhere that talks about pointer-events: none not being handled correctly.

From https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/elementFromPoint

Elements with pointer-events set to none will be ignored, and the element below it will be returned.

Code that needs fixing

This function is called to determine if a fixed element is being covered by another element, which is essentially calling .elementFromPoint. I'm not exactly sure how to approach fixing completely though.

https://github.com/cypress-io/cypress/blob/update-cypress-cache-list-6404/packages/driver/src/dom/visibility.js#L238:L238

josh-byster · 2020-03-10T10:38:12Z

Thank you for looking into this further @jennifer-shehane!

samjetski · 2020-04-09T09:48:00Z

I've come across a variation on the same problem. In my case it's a tooltip on a modal/overlay, which means the nesting is inverted (pointer-events: none element inside position: fixed container).

index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="position: fixed;">
    <div id="tooltip" style="pointer-events: none; border: 2px solid maroon;">Tooltip</div>
</div>
</body>
</html>

spec.js

it('pointer events within fixed element', () => {
    cy.visit('index.html');
    cy.get('#tooltip').should('be.visible');
});

One solution that comes to mind is that if the tested element (or any parent) has pointer-events: none then:

Take the fall-through element (which is competing for "most visible") and the tested element
Walk up to the nearest common parent
Compare z-index, DOM order, etc. of elements up the tree to find out which "wins" being on top

Is this kind of thing realistic? I'm not at all familiar with the Cypress internals. One drawback is that we don't know if there are other obscuring elements with pointer-events: none in front, though maybe we just need to live with that.

Also out of curiosity, why does this only happen when there is a parent with position: fixed?

jennifer-shehane · 2020-04-14T08:44:17Z

@samjetski The majority of the visibility code can be found here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/visibility.js#L20:L20

Doing something like noted is not uncalled for for how we check visibility of elements. It's very specific checks.

TheDutchCoder · 2020-06-30T15:15:32Z

I'm wondering why there's no z-index checking in the tests? https://github.com/cypress-io/cypress/blob/715d07c1a9308ad215fe35da2775100a31dbf982/packages/driver/cypress/integration/dom/visibility_spec.ts

There's also no mention of z-index or stacking in the source for visibility which I find suspicious.
I'm not entirely sure what method ends up throwing the error, my best guess would be either elIsNotElementFromPoint or elIsOutOfBoundsOfAncestorsOverflow.

jennifer-shehane · 2020-07-07T07:56:46Z

This is still reproducible in Cypress 4.9.0

cypress-bot · 2020-07-29T06:07:19Z

The code for this is done in cypress-io/cypress#8095, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

cypress-bot · 2020-08-03T17:25:21Z

Released in 4.12.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v4.12.0, please open a new issue.

jennifer-shehane changed the title ~~Visibility Error with Loader~~ position: fixed elements having parent with pointer-events: none mistakenly display as not visible / covered by another el Mar 10, 2020

jennifer-shehane added type: bug topic: visibility 👁 pkg/driver This is due to an issue in the packages/driver directory labels Mar 10, 2020

cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Mar 10, 2020

TheDutchCoder mentioned this issue Jun 29, 2020

Incorrect "CSS property: 'position: fixed'" error for elements that don't have position: fixed at all #7853

Closed

jennifer-shehane mentioned this issue Jul 7, 2020

Element visibility fixes #1242

Closed

15 tasks

jennifer-shehane added the internal-priority label Jul 7, 2020

panzarino self-assigned this Jul 27, 2020

panzarino mentioned this issue Jul 27, 2020

fix: Update visibility check for position: fixed combined with pointer-events: none #8095

Merged

5 tasks

cypress-bot bot added stage: work in progress stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope stage: work in progress stage: needs review The PR code is done & tested, needs review labels Jul 27, 2020

jennifer-shehane closed this as completed in #8095 Jul 29, 2020

cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Jul 29, 2020

cypress-bot bot removed the stage: pending release label Aug 3, 2020

cypress-bot bot locked as resolved and limited conversation to collaborators Aug 3, 2020

This issue was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`position: fixed` elements having parent with `pointer-events: none` mistakenly display as not visible / covered by another el #6675

`position: fixed` elements having parent with `pointer-events: none` mistakenly display as not visible / covered by another el #6675

josh-byster commented Mar 8, 2020 •

edited by sync-by-unito bot

Loading

jennifer-shehane commented Mar 10, 2020 •

edited

Loading

josh-byster commented Mar 10, 2020

samjetski commented Apr 9, 2020

jennifer-shehane commented Apr 14, 2020

TheDutchCoder commented Jun 30, 2020

jennifer-shehane commented Jul 7, 2020

cypress-bot bot commented Jul 29, 2020

cypress-bot bot commented Aug 3, 2020

position: fixed elements having parent with pointer-events: none mistakenly display as not visible / covered by another el #6675

position: fixed elements having parent with pointer-events: none mistakenly display as not visible / covered by another el #6675

Comments

josh-byster commented Mar 8, 2020 • edited by sync-by-unito bot Loading

Current behavior:

Desired behavior:

Test code to reproduce

Versions

jennifer-shehane commented Mar 10, 2020 • edited Loading

Reproducible Example:

Why

Code that needs fixing

josh-byster commented Mar 10, 2020

samjetski commented Apr 9, 2020

jennifer-shehane commented Apr 14, 2020

TheDutchCoder commented Jun 30, 2020

jennifer-shehane commented Jul 7, 2020

cypress-bot bot commented Jul 29, 2020

cypress-bot bot commented Aug 3, 2020

`position: fixed` elements having parent with `pointer-events: none` mistakenly display as not visible / covered by another el #6675

`position: fixed` elements having parent with `pointer-events: none` mistakenly display as not visible / covered by another el #6675

josh-byster commented Mar 8, 2020 •

edited by sync-by-unito bot

Loading

jennifer-shehane commented Mar 10, 2020 •

edited

Loading