paper-elements paper-menu-button misaligned if inserted in core-toobar

I'm using a paper-menu-button inside a core-toobar but it is a pixel under the middle line (in some cases they become two) making it misaligned with other elements.

I've checked with the polymer version and it works fine.

Here the Polymer example where a paper-menu-button and a core-icon-button are side by side: http://jsbin.com/zajujegonele/1/

Here the dart-polymer code:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>

    <link rel="import" href="packages/polymer/polymer.html">

    <link rel="import" href="packages/core_elements/core_toolbar.html">
    <link rel="import" href="packages/paper_elements/paper_menu_button.html">
    <link rel="import" href="packages/core_elements/core_icon_button.html">

    <style>

    paper-menu-button::shadow core-icon { 
      vertical-align: middle;
    }
    </style>

  </head>
  <body unresolved >

    <core-toolbar header>
      <paper-menu-button icon="menu"></paper-menu-button>
      <core-icon-button icon="menu"></core-icon-button>
      <span flex>Company Name</span>      
      <span>Centered</span>
      <span flex></span>
      <core-icon-button icon="search"></core-icon-button>
    </core-toolbar>

    <!-- bootstrap polymer -->
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Oct 15 '14 15:10 fedy2

Setting to zero the font-size of the paper-menu-button looks working as workaround.

paper-menu-button { 
  font-size: 0px;
}

Oct 15 '14 15:10 fedy2

Most likely this was just fixed in the most recent version of the JS elements, and once we do a roll we will get the update as well. I messed around with it a little bit and could not figure out exactly what was causing the issue, the styles appear to be the same :(. If it is not fixed in the next roll we can revisit this.

Oct 15 '14 16:10 jakemac53

Comparing the properties of the JS versions vs the Dart one I see only a difference on the paper-menu-button heights.

Taking all the CSS properties (also the inherited one) here the differences: JS: -webkit-perspective-origin: 20px 20px; -webkit-transform-origin: 20px 20px; height: 24px; perspective-origin: 20px 20px; transform-origin: 20px 20px;

Dart: -webkit-perspective-origin: 20px 21px; -webkit-transform-origin: 20px 21px; height: 26px; perspective-origin: 20px 21px; transform-origin: 20px 21px;

I hope this somehow helps.

Oct 15 '14 16:10 fedy2

Ya, I can see that the height is a bit taller, that in itself is not an issue since its vertically centered but the core-icon is not vertically centered inside it. In the dart version the inherited font size of 1.3em is causing the button to be 26px tall instead of 24px tall, but the javascript version is getting this same inherited style so that is confusing. Overriding the font size to 1rem like in core-icon-button does fix it but I feel like its hiding the actual issue. Also it may be hard to get that added to the JS repo since they aren't experiencing the issue. All that being said I would still not be surprised if during the next roll it gets magically fixed...

Oct 15 '14 17:10 jakemac53