[wp-trac] [WordPress Trac] #17418: Additional admin_user_info_links spill out

[WordPress Trac]

#17418: Additional admin_user_info_links spill out
--------------------------+------------------------------
 Reporter:  trepmal       |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  UI            |     Version:  3.2
 Severity:  normal        |  Resolution:
 Keywords:                |
--------------------------+------------------------------

Comment (by Otto42):

 The reason this is happening is because of this CSS code in wp-
 admin.dev.css:

 {{{
 #user_info.active #user_info_links ul {
         margin-top: 0;
         -moz-transition: margin-top 150ms ease-out;
         -webkit-transition: margin-top 150ms ease-out;
         -o-transition: margin-top 150ms ease-out;
         transition: margin-top 150ms ease-out;
 }

 #user_info_links ul {
         border-width: 1px;
         border-style: solid;
         margin-top: -100%;
         -moz-transition: margin-top 250ms ease-in;
         -webkit-transition: margin-top 250ms ease-in;
         -o-transition: margin-top 250ms ease-in;
         transition: margin-top 250ms ease-in;
 }
 }}}

 The CSS transition is what is scrolling this div in and out. The problem
 is that it's using the margin-top to do it, and it's transitioning to
 margin-top:-100% to scroll it in. When using a percentage value on a
 margin, any margin, browsers treat it as a percentage of the *width*.
 They're not smart enough to apply it as a percentage of the height on
 top/bottom margins.

 So the fact that this works at all is a bit of a fluke. The width happens
 to be larger than the default height, but when you start adding items to
 it, the height gets bigger and the margin-top:-100% isn't enough to hide
 it anymore.

 Looking for alternatives now.

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