Re: [csswg-drafts] [cssom-view] Proposal: add Element.isVisible[toDocument] to detect if element is visible in the document. (#6850)

Prior art:

* [jQuery :visible](https://api.jquery.com/visible-selector/#visible1). (Note: meaning: "has a box and width or height greater than zero". CSS `visibility` or `opacity`, as well as clipping, are ignored.)

Types of visibility:

1. Has a box ("is rendered" according to HTML spec terminology)
2. Is not skipped by `content-visibility` ancestors
3. Non-zero `opacity`
4. Full `opacity` (`opacity:1`)
5. `visibility:visible`
6. Not clipped out by a clip or filter
7. Occluded by some other element
8. Not scrolled out of the viewport

Proposal:

Pass an options dictionary to a new `isVisible` API, which returns a dictionary of results. By default, use cases 1 and 2 will be queried. Others would be opt-in via the options dictionary.

The justification for including use cases 1 and 2 by default is that there is no other way to do it at present, and these are the minimum requirements to be even possibly visible. The jQuery API also does this (plus a bit more).

```
// Element.isVisible(opts) -> resultDict

my_element.isVisible({}) -> {hasBox: true/false, isSkipped: true/false}

// possible additions:
my_element.isVisible({trackOpacity: true} -> {hasBox: true/false, isSkipped: true/false, isFullyOpaque: true/false, hasNonZeroOpacity: true/false}
my_element.isVisible{trackVisibilityCSS: true}-> {hasBox: true/false, isSkipped: true/false, visibilityVisible: true/false}
my_element.isVisible({trackViewport: true} -> {hasBox: true/false, isSkipped: true/false, isInViewport: true/false}
my_element.isVisible({trackOcclusion: true} -> {hasBox: true/false, isSkipped: true/false, isOccluded: true/false}
```

`trackOcclusion` would use the [same algorithm as IOv2](https://w3c.github.io/IntersectionObserver/v2/#visibility).This handles use case 4+6+7 together.

IMO we should not add `trackOcclusion`, `trackVisibility`, or `trackViewport` or `trackOpacity` unless there is strong demand. Most/all of the use cases can already be solved with `IntersectionObsever` or checking computed styles, which in the case of `IntersectionObserver` are more performant.

But this design allows them to be added in the future.




-- 
GitHub Notification of comment by chrishtr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6850#issuecomment-1011388347 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 12 January 2022 19:38:47 UTC