Polymer 纸波纹在元件外

聚合物1.1

我使用的是

纸张波纹

，效果很好。但是，波纹会从元件的一侧消失。在所有的例子中，这并没有发生。我真的希望将涟漪效应保持在元素内部，而不是外部

<dom-module id="portfolio-display">
  <style>
    :host {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 40%;
     }

    section {
      width: 100%;
      transition: box-shadow 0.1s ease-out; 
      background-color: #5a7785;
    }

    section:hover {
      box-shadow: 0px 0px 30px 0 rgba(0,0,0,0.2), 0 10px 10px 0 rgba(0,0,0,0.24);
      cursor: pointer;
    }

    @media all and (min-width: 1200px) {
      section {
        width: 90%;
      }
    }

    iron-icon[icon="build"] {
      color: rgba(255, 87, 34, 1);
    }

    .big { 
      --iron-icon-height: 200px;
      --iron-icon-width: 200px;
    }
  </style>

  <template>
    <section>
      <div onclick="page('/portfolio')"
        class="vertical layout">
        <div>
          <div>
            <h2 class="section-title">Portfolio</h2>
            <p class="section-description">blah blah blah</p>
          </div>
          <div class="layout horizontal center-center">
            <iron-icon class="big" icon="build"></iron-icon>
          </div>
        </div>
      </div>
      <paper-ripple></paper-ripple>
    </section>
  </template>

  <script>
    Polymer({
      is: "portfolio-display"
    });
  </script>
</dom-module>

：主持人{
@应用（--水平布局）；
@应用（--布局中心对齐）；
身高：40%；
}
部分{
宽度：100%；
过渡：框阴影0.1s放松；
背景色：#5a7785；
}
部分：悬停{
盒影：0px 0px 30px 0 rgba（0,0,0,0.2），0 10px 10px 0 rgba（0,0,0,0.24）；
光标：指针；
}
@介质和全部（最小宽度：1200px）{
部分{
宽度：90%；
}
}
铁图标[icon=“build”]{
颜色：rgba（255,87,34,1）；
}
.大{
--铁图标高度：200px；
--铁图标宽度：200px；
}
文件夹
诸如此类
聚合物({
是：“公文包展示”
});

由于默认情况下，

纸张波纹

的位置设置为

绝对

，请尝试为您的

部分提供一个
相对
位置

<section class="relative">