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

Ouverte
  • Quelque chose ne va pas ?
#1,149 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
48/100
Type d'issue
Documentation
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
jquery
Domaine
documentation

Piste de recherche

Commencez par examiner la documentation de l’API jQuery pour :visible et :hidden, ainsi que src/css/hiddenVisibleSelectors.js et le cas de test du navigateur associé. Documentez les divergences signalées dans Firefox, IE et les autres navigateurs, expliquez la zone grise de CSSOM et recommandez la prudence lors de l’utilisation de ces sélecteurs ; le bug Firefox associé est également lié pour fournir du contexte.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

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.

Langage dominant
HTML
Étoiles
324
Forks
259
Merge moyen
1 j 30 min
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de jquery/api.jquery.com

Toutes les issues de jquery/api.jquery.com

Issues similaires

Plus d'issues Documentation

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.