纸波纹遍布整个屏幕而不是包含在我的元素中？

Question

我是不是做错了什么？出于某种原因，当我点击屏幕上的 任何地方 而不仅仅是下面的图像时，我的纸波纹发生了？我弄乱了语法吗？文档不是很清楚..

<polymer-element name="sound-card">
<template>
    <style>
        /*snip*/
        .soundcard-img {
            height: 77%;
            width: 100%;
        }

        paper-ripple {
            color: #00ca92;
        }
    </style>
    <div class="soundcard-container" vertical layout>
        <img src="../img1.jpg" class="soundcard-img">
        <paper-ripple fit></paper-ripple>
        <div horizontal layout center justified>
            <div>test</div>
            <a href="#"></a>
        </div>
    </div>
</template>

<script>
    Polymer({
        ready: function() {
        }
    });
</script>
</polymer-element>

我是否需要将纸波纹包含在聚合物定义的元素中而不是 div？如果相关的话，我的容器 div 设置为 200x260px！谢谢！

Answer 1

查看网页检查器，问题似乎是 <paper-ripple> 元素的大小覆盖了整个页面。在该元素上使用 fit 属性 requires:

Note: When using the fit attribute, there must be a container with fixed size and has position: relative layout. This is so the children know where to fit to.

将 style="position:relative" 添加到您的声卡容器元素（或任何其他添加样式的方式）对我来说 Chrome 稳定。

纸波纹遍布整个屏幕而不是包含在我的元素中？

Paper-ripple going all over screen instead of being contained within my element?

polymer