Untitled

<!doctype html>
<html>
<head>
  <title>core-header-panel bug</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
  <link rel="import" href="bower_components/font-roboto/roboto.html">
  <link rel="import" href="bower_components/core-icon/core-icon.html">
  <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
  <style>
    body,html{
      font-family: 'RobotoDraft', sans-serif;
    }

    core-header-panel {
      height: 400px;
    }

    .core-header {
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      background-color: #4F7DC9;
      color: #FFF;
      transition: height 0.6s;
    }

    .core-header.tall {
      height: 180px;
    }

    .content {
      height: 2000px;
      background: linear-gradient(rgb(214, 227, 231), lightblue);
    }
  </style>
</head>
<body fullbleed>
<template is="auto-binding">
  <core-animated-pages flex selected="0" transitions="hero-transition cross-fade-all">
    <section flex>
      <core-header-panel mode="waterfall-tall">
        <core-toolbar class="core-header" justify="end">
          <paper-icon-button icon="search"></paper-icon-button>
          <input type="search" value="Test"/>

          <div class="bottom indent">
            <div flex>Little test</div>
          </div>
        </core-toolbar>
        <div class="content">
          <div>Content</div>
        </div>
      </core-header-panel>
    </section>
  </core-animated-pages>
</template>
</body>
</html>