[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        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+------------------------------

Comment (by afercia):

 On Windows, this is very noticeable in Chrome too. See below, where I've
 just overlaid two screenshots, zoomed to 600% and made the upper layer
 semi-transparent:

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

 Operating systems have different font rendering. Browsers have
 [http://tylertate.com/blog/2012/01/05/subpixel-rounding.html different
 sub-pixel rounding algorithms]. Hardware acceleration may be triggered or
 not depending also on hardware type and drivers. Not everyone has a device
 with a GPU. Too many variables to predict and IMHO dashicons should have
 centered glyphs in the first place. See the screenshot below, it's the
 dashicon glyph loaded in the icomoon app. (Can't center a 3px wide bar in
 a 20px grid though).

 For a CSS fix maybe the transform-origin should be `11px 9px` for all
 browsers?

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

 I've played a bit with the [http://www.w3.org/TR/css-will-change/ will-
 change CSS property] and seems it can help a bit. Should be used sparingly
 though.

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