[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         |       Owner:
     Type:  defect (bug)    |      Status:  new
 Priority:  normal          |   Milestone:  3.6
Component:  Administration  |     Version:  3.5
 Severity:  normal          |  Resolution:
 Keywords:  ui-focus        |
----------------------------+------------------
Description changed by SergeyBiryukov:

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

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

--

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