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

Abierto
  • ¿Algo no está bien?
#1,149 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
48/100
Tipo de issue
Documentación
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
jquery
Área
documentation

Línea de trabajo

Comienza revisando la documentación de la API de jQuery para :visible y :hidden, junto con src/css/hiddenVisibleSelectors.js y el caso de prueba del navegador enlazado. Documenta las discrepancias notificadas en Firefox, IE y otros navegadores, explica la zona gris de CSSOM y recomienda precaución al usar estos selectores; el error relacionado de Firefox también está enlazado como contexto.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
HTML
Estrellas
324
Forks
259
Merge medio
1 d 30 min
PR fusionados (30 d)
1

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de jquery/api.jquery.com

Todos los issues de jquery/api.jquery.com

Issues similares

Más issues de Documentation

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.