#6757 closed bug (fixed)

Opened December 16, 2010 09:10PM UTC

Closed September 26, 2012 04:55PM UTC

.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)

Attachments (0)
Change History (16)

Changed December 16, 2010 10:06PM UTC by lukebrookhart comment:1

Created Test Case at http://www.onjax.com/random/jqueryui-bug-6757.html

Changed December 17, 2010 03:26AM UTC by scottgonzalez comment:2

component: ui.widget → CSS Framework

Changed December 20, 2010 09:28PM UTC by scottgonzalez comment:3

#6767 is a duplicate of this ticket.

Changed February 01, 2011 06:04PM UTC by epascarello comment:4

Seeing this issue with chrome with a very large page. Also wouldn't the space just make that rule not apply to anything?

Changed February 01, 2011 06:57PM UTC by lukebrookhart comment:5

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

Changed March 10, 2011 11:46AM UTC by coredan comment:6

_comment0: 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; } */ \ }}} \ → 1299757686357324

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; } */

Changed March 10, 2011 03:43PM UTC by lukebrookhart comment:7

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.

Changed May 04, 2011 10:59PM UTC by joaoeiras comment:8

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.

Changed May 05, 2011 01:14PM UTC by scottgonzalez comment:9

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.

Changed May 05, 2011 05:01PM UTC by lukebrookhart comment:10

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.

Changed May 10, 2011 04:40PM UTC by k_borchers comment:11

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

Changed May 10, 2011 04:44PM UTC by scottgonzalez comment:12

This needs to wait on feedback from the design team.

Changed May 25, 2011 08:57AM UTC by JasonBerry comment:13

Replying to [comment:8 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 :)

Changed September 30, 2011 12:59PM UTC by scottgonzalez comment:14

#7751 is a duplicate of this ticket.

Changed September 25, 2012 08:57PM UTC by scottgonzalez comment:15

Also see #8596.

Changed September 26, 2012 04:55PM UTC by Scott González comment:16

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