Ticket #6757 (closed bug: fixed)
.ui-widget :active { outline: none; } causes slowness in FF
| Reported by: | lukebrookhart | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.9.0 |
| Component: | ui.css-framework | Version: | 1.8.7 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
The following CSS class causes 1-3 second slowness with larger forms in FF.
.ui-widget :active { outline: none; }
Upon clicking a checkbox, there is a delay of 1-3 seconds before checkbox appears. Clicking a select dropdown delays the display of the dropdown by 1-3 seconds as well.
My test form has 1873 form elements (mostly checkboxes via a city and town selections, but it does include selects and inputs)
Change History
comment:4 Changed 2 years ago by epascarello
Seeing this issue with chrome with a very large page. Also wouldn't the space just make that rule not apply to anything?
comment:6 Changed 2 years ago by coredan
This issue only occurs in FF, at least for me.
If you remove the DOCTYPE, the issue does not occur (test in all web browsers). It is not recommended
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This line in jQuery UI css file is malformed...
.ui-widget :active { outline: none; }
The correct syntax will be:
// Note: It has removed the space after the colon
.ui-widget:active { outline: none; }
But response times are still too slow. The best solution for now is to comment this line.
/* BUG: .ui-widget:active { outline: none; } */
comment:7 Changed 2 years ago by lukebrookhart
I believe the space before the :active was intentional, as it is meant to affect all descendant elements of .ui-widget not the .ui-widget itself. Regardless, I still think this line should be removed due to its terrible performance with large number of checkboxes.
comment:8 follow-up: ↓ 13 Changed 2 years ago by joaoeiras
You can just replace it with
.ui-widget * { outline: none; }
It seems the :active pseudo-class is too expensive to match, and the rule above has the same practical effect, because by default, elements don't have outlines.
comment:9 Changed 2 years ago by scott.gonzalez
We should probably just move the outline: none style into .ui-state-active. We shouldn't be killing the outline on anything that we're not explicitly styling as active in some other way.
comment:10 Changed 2 years ago by lukebrookhart
Scott, are UI elements automatically give a .ui-state-active class when they are focused? If not, I'm not sure that solves the issue.
comment:11 Changed 2 years ago by k_borchers
Scott, I took your suggestion to move outline: none to .ui-state-active one step further and also added it to .ui-state-active a. That solved the bug and also an issue I noticed where in FF3, tabs were still getting the outline when active.
See https://github.com/jquery/jquery-ui/pull/239
Thanks
comment:12 Changed 2 years ago by scott.gonzalez
This needs to wait on feedback from the design team.
comment:13 in reply to: ↑ 8 Changed 2 years ago by JasonBerry
Replying to joaoeiras:
You can just replace it with
.ui-widget * { outline: none; }It seems the :active pseudo-class is too expensive to match, and the rule above has the same practical effect, because by default, elements don't have outlines.
The :active pseudo-class might be expensive to match in FF but using a universal key selector is inefficient in **all** browsers, which will slow down page rendering (browsers evaluate selectors from right to left). Don't do that :)
comment:14 Changed 20 months ago by scott.gonzalez
#7751 is a duplicate of this ticket.
comment:15 Changed 8 months ago by scott.gonzalez
Also see #8596.
comment:16 Changed 8 months ago by Scott González
- Status changed from new to closed
- Resolution set to fixed
Theme: Don't remove outlines on active elements. Fixes #6757 - .ui-widget :active { outline: none; } causes slowness in FF.
Changeset: ac0f6de4c830847b26fc59d485013359d8d30afc
Created Test Case at http://www.onjax.com/random/jqueryui-bug-6757.html