Opened 9 years ago

Closed 7 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 9 years ago by lukebrookhart

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

Component: ui.widgetCSS Framework

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

#6767 is a duplicate of this ticket.

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

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

comment:6 Changed 9 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):

<!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; } */
Version 0, edited 9 years ago by coredan (next)

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

This needs to wait on feedback from the design team.

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

#7751 is a duplicate of this ticket.

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

Also see #8596.

comment:16 Changed 7 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.