纸的涟漪遍布屏幕而不是被控制在我的元素里？

Question

我在这里做错什么了吗？由于某种原因，当我点击屏幕上的anywhere而不仅仅是它下面的图片时，我的纸纹就会发生吗？我搞砸了语法吗？文件不太清楚。

<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属性在该元素需要上的使用

注意:当使用fit属性时，必须有一个大小固定且具有position: relative布局的容器。这样孩子们就知道适合哪里了。

添加style="position:relative"到您的声卡容器元素(或任何其他方式添加样式)为我在Chrome稳定。