Perché la mia icona di ferro polimerico appare sotto il mio input di carta sulla navigazione?

Question

ho qualche semplice codice (Angular2 + Polymer) che crea un paper-input con un iron-icon come suffix un'icona:

<paper-input type="text" [control]="email" label="Email"> 
     <iron-icon suffix icon="mail"></iron-icon> 
</paper-input> 

Ecco la pagina intera, si noti che le classi della griglia Materialise e di riga sono le classi solo materializzarsi ho portato nel progetto:

<div class="section"> 
    <h1 class="paper-font-headline">Admin Registration</h1> 

    <div class="row"> 
     <div class="col s12 m6 6"> 
      <p class="paper-font-body2">some stuff here</p> 
     </div> 

     <div class="col s12 m6 6"> 
      <paper-card class="stretch"> 
       <div class="sub-section"> 
        <form> 
         <paper-input type="text" 
            [control]="email" 
            label="Email"> 
          <iron-icon suffix icon="mail"></iron-icon> 
         </paper-input> 
        </form> 
       </div> 
      </paper-card> 
     </div> 
    </div> 
</div> 

Questo sembra piuttosto buono a pagina carico:

Quando ho navigare lontano dalla pagina e ritorno, invece, l'icona scende sotto l'ingresso:

nel codice HTML si può chiaramente vedere che l'icona è posto al di fuori della paper-input-container sulla navigazione.

Qualcuno ha visto questo prima? Sono in perdita. Una cosa da notare è che questo accade solo quando uso webcomponents-lite.js nel mio file index.html. webcomponents.js ha altri problemi quando usato (non dovrebbe essere usato) ma questo non è uno di questi. Questo è Polymer 1.0. Grazie!

Edit:

Questo non è un problema in Chrome, ma negli altri principali browser.

Qui sono i miei importazioni nel caso in cui essi sono rilevanti:

<!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script> 
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> 

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
    <script> 
     window.Polymer = window.Polymer || {}; 
     window.Polymer.dom = 'shadow'; 
    </script> 

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="node_modules/angular2/bundles/http.dev.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/router.dev.js"></script> 

    <link rel="import" href="bower_components/paper-styles/classes/global.html"> 
    <link rel="import" href="bower_components/paper-styles/classes/shadow.html"> 
    <link rel="import" href="bower_components/paper-styles/classes/shadow-layout.html"> 
    <link rel="import" href="bower_components/paper-styles/classes/typography.html"> 

    <link rel="import" href="bower_components/polymer/polymer.html"> 
    <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html"> 
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" href="bower_components/paper-menu/paper-menu.html"> 
    <link rel="import" href="bower_components/paper-item/paper-item.html"> 
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" href="bower_components/iron-icon/iron-icon.html"> 
    <link rel="import" href="bower_components/iron-icons/iron-icons.html"> 
    <link rel="import" href="bower_components/paper-ripple/paper-ripple.html"> 
    <link rel="import" href="bower_components/paper-card/paper-card.html"> 
    <link rel="import" href="bower_components/paper-input/paper-input.html"> 

qui sono i miei bower.json dipendenze:

"dependencies": { 
    "webcomponentsjs": "~0.7.21", 
    "polymer": "Polymer/polymer#~1.3.0", 
    "paper-elements": "PolymerElements/paper-elements#~1.0.7" 
    } 

Answer 1

<link rel="import" href="../paper-input/paper-input.html"> 
<link rel="import" href="../core-icons/core-icons.html"> 
<link rel="import" href="../core-icon/core-icon.html"> 

<polymer-element name="my-element"> 

    <template> 
    <style>  
     #paper_input { 
     left: 380px; 
     top: 380px; 
     position: absolute; 
     } 
     #core_icon { 
     left: 530px; 
     top: 390px; 
     position: absolute; 
     } 
    </style> 
    <paper-input label="Type something..." id="paper_input"></paper-input> 
    <core-icon icon="mail" id="core_icon"></core-icon> 
    </template> 

    <script> 

    Polymer({ 

    }); 

    </script> 

</polymer-element>