[wp-trac] [WordPress Trac] #32902: Menu Customizer: menu name field top margin collapses in Chrome

[WordPress Trac]

#32902: Menu Customizer: menu name field top margin collapses in Chrome
--------------------------+-----------------------------
 Reporter:  afercia       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 Noticed just in Chrome. When reordering or deleting menu items, the margin
 above the menu name field collapses:

 [[Image(https://cldup.com/SQMm82Zet4.png)]]

 To me, this seems a Chrome's bug, specifically when it has to recalculate
 the  nth-child selector. To debug, try to add something like this:
 {{{
 #customize-theme-controls .control-section .accordion-section-content > li
 .customize-control:nth-child(3) {
         outline: 2px solid red;
 }
 }}}
 and you should see the first menu item with a red outline. Now reorder the
 menu items, do it multiple times. While Firefox always displays the red
 outline on the first item, Chrome (at least Chrome 43 on Windows)
 sometimes shows the outline, sometimes not. I guess in the same way it
 doesn't re-apply the 12px top margin on the menu name input field. See
 {{{
 #customize-theme-controls .control-section .accordion-section-content > li
 .customize-control:nth-child(2) {
         margin-top: 12px;
 }
 }}}
 in `customize-controls.css`. In fact, looks like just not using `nth-
 child(2)` fixes the margin issue.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32902>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform