Weird rendering issue in Chrome desktop that I don't see on mobile

[BootsSiR]

Description

On my desktop in Chrome, if I click on a tab, the tab color will darken with each click until completely saturated. I do not see the same behaviour on Android. Is this something I've misconfigured or an issue?

Expected outcome

The tabs toggle color based on selected state.

Actual outcome

the tab color will darken with each click until completely saturated

Live Demo

http://i.imgur.com/kKWqund.gif

Steps to reproduce

My particular setup:

<style include="shared-styles iron-flex iron-flex-alignment iron-positioning">
            :host {
                display: block;
                padding: 10px;
                @apply(--layout-fit);
            }

            paper-tabs {
                --paper-tabs-selection-bar-color: var(--light-primary-color);
                font-family: 'Roboto', 'Noto', sans-serif;
                -webkit-font-smoothing: antialiased;
                width: 100%;
                text-transform: uppercase;
                margin-bottom: 1px;
            }

            paper-tab {
                --paper-tab-ink: var(--dark-primary-color);
            }

            paper-ripple {
                color: var(--default-primary-color);
            }

            iron-pages {
                @apply(--layout-vertical);
                @apply(--layout-flex);
            }
            
            iron-pages div {
                margin:10px;
            }
</style>
<paper-tabs selected="{{selectedTab}}" attr-for-selected="name" style="height:50px;">
                <paper-tab name="one">[[getString('one')]]</paper-tab>
                <paper-tab name="two">[[getString('two')]]</paper-tab>
                <paper-tab name="three">[[getString('three')]]</paper-tab>
            </paper-tabs>
            <iron-pages selected="[[selectedTab]]" attr-for-selected="name" fallback-selection="view404">
                <div name="one" class="vertical layout flex">
                    <div class="vertical layout flex">blah</div>
                </div>
                <div name="two"></div>
                <div name="three"></div>
            </iron-pages>
</paper-tabs>

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[BootsSiR]

noink to disable the ripple effect fixes this issue so I'm thinking there's a bug in paper-ripple. Perhaps this one? PolymerElements/paper-ripple#101