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 lukebrookhart

comment:2 Changed 13 years ago by Scott González

Component: ui.widgetCSS Framework

comment:3 Changed 13 years ago by Scott González

#6767 is a duplicate of this ticket.

comment:4 Changed 13 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:5 Changed 13 years ago by lukebrookhart

The issue doesn't occur in Chrome. Only in Firefox.

comment:6 Changed 13 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; } */
Last edited 13 years ago by coredan (previous) (diff)

comment:7 Changed 13 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 Changed 12 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 12 years ago by Scott González

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 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 12 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 12 years ago by Scott González

This needs to wait on feedback from the design team.

comment:13 in reply to:  8 Changed 12 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 12 years ago by Scott González

#7751 is a duplicate of this ticket.

comment:15 Changed 11 years ago by Scott González

Also see #8596.

comment:16 Changed 11 years ago by Scott González

Resolution: fixed
Status: newclosed

Theme: Don't remove outlines on active elements. Fixes #6757 - .ui-widget :active { outline: none; } causes slowness in FF.

Changeset: ac0f6de4c830847b26fc59d485013359d8d30afc

Note: See TracTickets for help on using tickets.