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

未关闭
  • 哪里不对？
#1,149 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
48/100
Issue 类型
文档
描述清晰度
基本清楚
活跃度
停滞
技术栈
jquery
领域
documentation

调研方向

首先，查看 jQuery API 中关于 :visible 和 :hidden 的文档，以及 src/css/hiddenVisibleSelectors.js 和链接的浏览器测试用例。记录 Firefox、IE 和其他浏览器中报告的差异，解释 CSSOM 中的灰色地带，并建议在使用这些选择器时保持谨慎；相关的 Firefox bug 也已链接以供参考。

由索引模型根据 Issue 内容生成。

描述

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.

主要语言
HTML
星标
324
派生
259
平均合并
1 天 30 分钟
30 天内合并 PR
1

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

jquery/api.jquery.com 的其他 Issue

查看 jquery/api.jquery.com 的全部 Issue

相似的 Issue

更多 Documentation Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。