WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 19 months ago

#23684 closed defect (bug)

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

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

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 (0)

Note: See TracTickets for help on using tickets.