Ticket #6757 (closed bug: fixed)

Opened 4 years ago

Last modified 2 years ago

.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:1 Changed 4 years ago by lukebrookhart

comment:2 Changed 4 years ago by scott.gonzalez

  • Component changed from ui.widget to CSS Framework

comment:3 Changed 4 years ago by scott.gonzalez

#6767 is a duplicate of this ticket.

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

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

comment:6 Changed 3 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 3 years ago by coredan (previous) (diff)

comment:7 Changed 3 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 3 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 3 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 3 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 3 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 3 years ago by scott.gonzalez

This needs to wait on feedback from the design team.

comment:13 in reply to: ↑ 8 Changed 3 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 3 years ago by scott.gonzalez

#7751 is a duplicate of this ticket.

comment:15 Changed 2 years ago by scott.gonzalez

Also see #8596.

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

Note: See TracTickets for help on using tickets.