WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 17 months ago

#23684 closed defect (bug)

wp-admin CSS style conflicts with jQuery-UI breaking form elements in Firefox — at Version 5

Reported by: Colin84 Owned by:
Milestone: 3.8 Priority: high
Severity: major Version: 3.5
Component: Administration Keywords: has-patch needs-testing
Focuses: ui Cc:

Description (last modified by SergeyBiryukov)

A default CSS style in the wordpress admin interface, which is loaded through load-styles.php either under the name wp-admin or buttons (both of which are inaccessible for removal as they are not listed in the WP_Styles object) interferes with jQuery-ui in such a way that any radio buttons (and possibly other form elements) that are styled with jQuery-ui in the admin interface (such as with a plugin) cause the browser window to jump to the top of the page when clicked. This behavious occurs with the current Wordpress version 3.5.1 using the latest Firefox 19.0 on linux (haven't tested in windows yet). After spending a few hours tracking down the offending code I narrowed it down to this statement in the admin CSS:

.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible {
position:absolute;
left:-1000em;
top:-1000em;
height:1px;
width:1px;
overflow:hidden;
}

The .ui-helper-hidden-accessible class is what is causing the conflict, specifically the "top:-1000em;" statement; due to the negative positioning values when a button is clicked the browser tries to focus on something styled with the ui-helper-hidden-accessible class, which is of course way outside the limits of the browser window. In order to correct the error I had to override it with the following in another stylesheet declared after load-styles.php:

.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible {
position:fixed;
left:1em;
top:1em;
height:1px;
width:1px;
overflow:hidden;
display:none;
}

We should not have to override default styles like this when making plugins, especially when we are using a js library (jQuery-ui) that is included with wordpress. Either the ui-helper-hidden-accessible class needs to be renamed or the negative values removed and replaced with a display:none; statement to fix this bug.

Change History (5)

comment:1 follow-up: @SergeyBiryukov2 years ago

  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.6
  • Version changed from 3.5.1 to 3.5

Introduced in [22285] (for #22166).

Could you provide a piece of code to reproduce the issue?

comment:2 in reply to: ↑ 1 @Colin842 years ago

Replying to SergeyBiryukov:

Introduced in [22285] (for #22166).

Could you provide a piece of code to reproduce the issue?

I have uploaded a test page which showcases the issue here -> http://colinhunt.com/wp-bug/

Scroll to the bottom and click on the radio buttons to reproduce the bug. The bug is reproducible in the latest Firefox version 19.0 for Linux. Probably in Windows too but haven't tested it there yet. When you view the source code, wp-admin-styles.css is the file with the offending wordpress styles as loaded with wp-admin/load-styles.php?c=0&dir=ltr&load=wp-admin,buttons&ver=3.5.1 in the wordpress admin sections.

comment:3 @Colin842 years ago

I have just confirmed that this bug is present and reproducible in Firefox versions 13.0.1 to 19.0 as well as in Internet Explorer 9 under Windows 7.

Last edited 2 years ago by Colin84 (previous) (diff)

comment:4 @helen2 years ago

display: none defeats the purpose of having accessibility text; please don't do that in your theme or plugin. I'd look into what jQuery UI does in their CSS themes and adjust to that, which we should also do for core.

comment:5 @SergeyBiryukov2 years ago

  • Description modified (diff)
Note: See TracTickets for help on using tickets.