jquery / jquery/api.jquery.com

Document the discrepancies of :visible/:hidden on select options between Firefox & the rest

Open
#1,149 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
325
Forks
260
PR merge metrics
No merged PRs in 30d

Description

From https://github.com/jquery/jquery/issues/4463#issuecomment-527180911 by me:

:visible & :hidden which are jQuery selector extensions defined in src/css/hiddenVisibleSelectors.js. :hidden is defined as a negation of :visible so we can focus on the latter. And browsers differ here:

  • Chrome 76, Safari 12.1 & Edge 18 match 0 elements for :visible
  • Firefox 68 matches 2 elements. Its results for those two:
    offsetWidth: 39
    offsetHeight: 14
    getClientRects().length: 1
    
  • IE 11 matches 3 elements for :visible. The results are not affected by display: none:
    offsetWidth: 0
    offsetHeight: 0
    getClientRects().length: 1
    
    The rect returned by getClientRects() has all properties set to 0.

The test case for the results I provided above: https://output.jsbin.com/bawosuv


From https://github.com/jquery/jquery/issues/4463#issuecomment-527182735 by me:

From a quick look at the CSSOM spec, all three properties (offsetWidth, offsetHeight & getClientRects) are expressed in terms of CSS layout box which has a note in the spec:

ISSUE 1 The terms CSS layout box and SVG layout box are not currently defined by CSS or SVG.

That indicates we're in a gray area here.


From https://github.com/jquery/jquery/issues/4463#issuecomment-529558196 by @gibson042:

It is an inconsistency, but I don't know that we should solve it. Lots of elements default to not having layout (<meta>, <style>, <template>, etc.), and in some cases that can be overridden. For example, <style> elements can have display: block, and—especially relevant here—<option>s in a <select multiple> really do take up space.

I think the right approach here is to push for a fix in Firefox, acknowledge that IE is just wrong, and add documentation recommending increased caution when using :hidden and :visible.


Issue reported in Firefox's bug tracker at https://bugzilla.mozilla.org/show_bug.cgi?id=1584752.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the jQuery API documentation for :visible and :hidden alongside src/css/hiddenVisibleSelectors.js and the linked browser test case. Document the reported Firefox, IE, and other-browser discrepancies, explain the CSSOM gray area, and recommend caution when using these selectors; the related Firefox bug is also linked for context.

Written by the indexing model from the issue text.

Assessment

Tech stack
jquery
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.