paper-ripple fails to fill paper-toolbar with "tall" class

[tilden]

Description

When a paper-ripple element is used inside a paper-toolbar element with the tall class, the paper-ripple effect only fills the toolbar's top area.

Expected outcome

The ripple effect should encompass the entire area of the toolbar

Actual outcome

The ripple effect only fills the toolbar's top area, and not the rest of it

Live Demo

Note that only the top third of the toolbar shows the ripple effect: https://jsbin.com/gukolecipi/edit?html,output

Steps to reproduce

1. Put a paper-toolbar element in the page.
2. Put a paper-ripple element inside said paper-toolbar

Browsers Affected

Verified in

• Chrome
• Firefox
• Safari 9.1

Workarounds

A similar issue was noted on StackOverflow here: http://stackoverflow.com/questions/33182299/paper-ripple-fill-sibling-element-in-paper-toolbar The suggested workaround, however, breaks scrolling for waterfall-style headers.