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

[mgol]

From jquery/jquery#4463 (comment) 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 jquery/jquery#4463 (comment) 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 jquery/jquery#4463 (comment) 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.