Opened 13 years ago
Closed 11 years ago
#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: | ||
| Blocked by: | Blocking: |
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 (16)
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
| Component: | ui.widget → CSS Framework |
|---|
comment:4 Changed 13 years ago by
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 13 years ago by
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 13 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
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:13 Changed 12 years ago by
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:16 Changed 11 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
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