Ripple does not respect border-radius of parent element or itself

[marcoms]

Original discussion was previously had for paper-tabs [0], though not specific to that component. This still appears unresolved - the paper-ripple demo page [1] shows the ripple leaking outside of the border radii of various elements with rounded corners. Setting border-radius on paper-ripple has no effect - the bug is likely rooted in the canvas implementation of the ripple.

The paper-button element does not suffer from this issue, but this is not default behaviour.

[0] googlearchive/paper-tabs#3
[1] http://www.polymer-project.org/components/paper-ripple/demo.html

[ebidel]

The ripple no longer uses canavs, but css:
989dea8

The border-radius should also be inherited from the container as of
989dea8.
I don't see it going over on that demo page on chrome android. What browser
are you using?
On Dec 28, 2014 5:05 PM, "Marco Scannadinari" [email protected]
wrote:

Original discussion was previously had for paper-tabs [0], though not
specific to that component. This still appears unresolved - the
paper-ripple demo page [1] shows the ripple leaking outside of the border
radii of various elements with rounded corners. Setting border-radius on
paper-ripple has no effect - the bug is likely rooted in the canvas
implementation of the ripple.

The paper-button element does not suffer from this issue, but this is not
default behaviour.

[0] googlearchive/paper-tabs#3 googlearchive/paper-tabs#3
[1] http://www.polymer-project.org/components/paper-ripple/demo.html

—
Reply to this email directly or view it on GitHub
#28.

[marcoms]

I don't see it going over on that demo page on chrome android. What browser
are you using?

Version 39.0.2171.95 (64-bit) -- on Linux

I did just test on Chrome Beta on Android and I still see the issue. (Not the paper-ripple class=circle, but the top buttons and "+1" buttons below - quite subtle because of ~2px border-radius, but I can see square edges when tapping :/)

[marcoms]

Managed to get screencasts of each:

Desktop: http://webmup.com/SvNZq/vid.webm
Mobile: http://webmup.com/ukRl4/vid.webm

[marcoms]

Update: This maybe a webkit/blink issue - tests on Firefox Developer show correct clipping of the ripple, but Opera had the same problems as Chrome

[marcoms]

Just noticed this issue manifesting itself more significantly in the calculator demo app. Once again only Blink is affected

http://webmup.com/WqVBR/vid.webm

[cdata]

This appears to be due to the use of transform when animating the ripple. Here is a simplified reproduction of the problem:

http://jsbin.com/temexa/1/edit?html,css,output

[cdata]

The above reproduces in Safari 8.

[cdata]

Per http://stackoverflow.com/questions/17300806/overflow-hidden-with-border-radius-and-translate3d#comment27193597_17303073, this appears to be resolved by applying a trivial translate3d to the clipping parent in Chrome 40. However, this does not resolve the problem as of Safari 8.

Updated test case: http://jsbin.com/temexa/2

[linto77]

this will solve the issue..:)
write papaer-ripple with fit property and use these class names.
'recenteringTouch circle'

[jonlesser]

FWIW, I was having this issue with Chrome 45.0.2454.99 when I had "Device mode" activated in the developer tools. Without "device mode", the ripple did respect the border radius applied to the paper-button.

[anshuman91]

This can achieve by css, see code below,

<dom-module id="app-index">
    <style is="custom-style">
        :root{
            --my-custom-color: #ffb6c1;
            --paper-tab-ink: var(--my-custom-color);
        }
        paper-tabs{
            {
                --paper-tabs:{
                    background-color: pink;
                    border-radius: 100px;
                    color: white;
                }
            };
            {
                --my-ripple-color: pink;
                --paper-tab-ink: var(--my-ripple-color);
            }
        }

        paper-tab.iron-selected {
            color: pink;
            background-color: white;
            border-radius: 100px;
        }
        paper-tab{
            height: 94% !important;
            top: 2px;
            left: 2px;
            margin-right: 4px;
        }
    </style>
    <template>
        <app-location route="{{route}}" url-space-regex="/polymer-test/demo/.*"></app-location>
        <app-route route="{{route}}" pattern="/polymer-test/demo/:tabName" data="{{data}}" tail="{{subroute}}" active="{{known}}">
        </app-route>
        <paper-tabs selected='{{data.tabName}}' attr-for-selected='key' no-bar>
            <paper-tab key='foo' route="{{subroute}}">Foo</paper-tab>
            <paper-tab key='bar' route="{{subroute}}">Bar</paper-tab>
            <paper-tab key='baz' route="{{subroute}}">Baz!</paper-tab>
        </paper-tabs>

        <neon-animated-pages selected='[[data.tabName]]'
        attr-for-selected='key'
        entry-animation='slide-from-left-animation'
        exit-animation='fade-out-animation'>
        <neon-animatable key='foo'><my-test></my-test></neon-animatable>
        <neon-animatable key='bar'>Bar Page Goes Here</neon-animatable>
        <neon-animatable key='baz'>Baz Page, the Best One of the Three</neon-animatable>
    </neon-animated-pages>
</template>
<script>
    Polymer({
        is: "app-index",
        observers: [
          '_routeChanged(route.*)',
          '_viewChanged(data.tabName)'
        ],
        _routeChanged: function(changeRecord) {
          if (changeRecord.path === 'path') {
            console.log('Path changed!');
          }
        },
        message: function(fav) {
            if (fav) {
                return "You really like me!";
            } else {
                return "Do you like me?";
            }
        },
        _viewChanged: function(data){
            console.log(data);
        },
        ready: function(){

               }
});
</script>
</dom-module>