[wp-trac] [WordPress Trac] #23684: wp-admin CSS style conflicts with jQuery-UI breaking form elements in Firefox

[WordPress Trac]

#23684: wp-admin CSS style conflicts with jQuery-UI breaking form elements in
Firefox
-----------------------------+----------------------------
 Reporter:  Colin84          |       Type:  defect (bug)
   Status:  new              |   Priority:  normal
Milestone:  Awaiting Review  |  Component:  Administration
  Version:  3.5.1            |   Severity:  normal
 Keywords:                   |
-----------------------------+----------------------------
 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.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/23684>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software