[wp-trac] [WordPress Trac] #33107: Add a Menu button: when clicked the icon does not rotate around center point

[WordPress Trac]

#33107: Add a Menu button: when clicked the icon does not rotate around center
point
--------------------------+-----------------------------
 Reporter:  sumobi        |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 When clicking the "Add a Menu" button in the Menus area of the customizer,
 the icon doesn't quite rotate around its center point. On some browsers
 like Chrome and Firefox the icon is also misaligned and pulled up too
 high.

 Here's the icon in Firefox for example:
 [[Image(https://cldup.com/01NjVg0Qh7-3000x3000.png)]]

 Screenshot of the rotated icon combined with its original position:

 [[Image(https://cldup.com/uO_3o712gB-3000x3000.png)]]

 Here's some short videos of how the icon rotates when clicked:

 Firefox 39 (OS X)
 https://cloudup.com/cBb9kdrvjNZ

 Chrome 43 (OS X)
 https://cloudup.com/ciNZeSgbab7

 Safari 8 (OS X)
 https://cloudup.com/cUmIW81nSht

 Safari is the only one that looks correct. The issue is partly caused by
 the "add" icon not a perfect square (it appears 1px wider in some
 browsers). By using the transform-origin CSS property we can improve how
 the icon rotates.

 Because of the icon being rendered 1px wider in some browsers it's not
 possible to get it exact, but it's certainly an improvement. Shown below
 are some videos of how they would look after some CSS adjustments using
 the transform-origin CSS property. Best viewed at normal size with the
 patch, but you get the idea:

 Firefox 39 (OS X)
 https://cloudup.com/ca2OWHuGe8q

 Chrome 43 (OS X)
 https://cloudup.com/c_5AROy460x

 Safari 8 (OS X)
 https://cloudup.com/c1YdWYfyMqd

 Also tested in IE 11 on Windows.

 First patch coming.

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