It seems that a hero-transition
from one animated page to one with a <core-header-panel mode="cover">
breaks the panel/toolbar.
I am able to reproduce the behavior with something like this:
<core-animated-pages id="controller" selected="{{selected}}" transitions="hero-transition">
<section>
<div class="container" hero-p>
<div class="card" hero-id="hero" hero on-tap="{{transition}}">
<div class="card-top" style="background:#000;" hero hero-id="bad">
</div>
<div class="card-bottom">
<div class="card-title">
HELLO
</div>
<div class="card-subtitle">
WORLD
</div>
</div>
</div>
</div>
</section>
<section>
<core-header-panel mode="cover">
<core-toolbar id="core_toolbar" class="tall" hero hero-id="hero">
<paper-icon-button icon="arrow-back" on-tap="{{transition}}"></paper-icon-button>
<div flex>HELLO WORLD</div>
<paper-icon-button icon="more-vert"></paper-icon-button>
</core-toolbar>
<section layout vertical fullbleed>
<h1 style="color: #fff;" hero hero-id="bad">SAMPLE CONTENT</h1>
</section>
</core-header-panel>
</section>
</core-animated-pages>
Here are some basic styles, perhaps something is conflicting, I don't know:
core-animated-pages {
height: 100%;
}
.container {
position: absolute;
top: 275px;
left: 0px;
right: 0px;
text-align: center;
}
.card {
display: inline-block;
position: relative;
border-radius: 3px;
margin: 4px;
overflow: hidden;
text-align: start;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.card-top {
width: 200px;
height: 200px;
text-align: center;
}
.card-bottom {
padding: 8px;
line-height: 1.5;
}
.card-title {
font-weight: bold;
}
core-header-panel {
width: 100%;
height: 100%;
}
core-toolbar {
color: #fff;
background-color: #009688;
}
Note: only when mode="cover"
does this seem to fail, i.e. mode="tall"
is fine.
If you remove the content from the second page's <section>
it doesn't have any issues.
Also, this seems to be the most broken on chrome, firefox sort of obscures the bar it seems like, but I didn't test extensively.
I came across this issue because I had a centered <img>
with about 200x200 dims which I wanted to cover the center of the toolbar on transition, but after transition, the toolbar would disappear. After some experimentation, seems to be for any content below the <core-toolbar>
.
Polymer is awesome, keep up the good work!