聚合物在所有孩子身上泛起涟漪答案

【问题标题】：Polymer ripple over all children聚合物在所有孩子身上泛起涟漪
【发布时间】：2014-07-19 13:12:49
【问题描述】：

我正在使用Polymer 创建一个网站。我目前遇到了paper-ripple 的一些问题。现在我遇到的问题是单击h2 或h3 时不会出现波纹，即使删除<div class='description'>-tag 并且它正在关闭选项卡也是如此。查看paper-ripple 的大小，它覆盖了整个<div class='album-header'>，所以这应该不是问题。

此外，在填充区域中单击<div class='description'> 下方也会产生波纹。

<div class="album-header" vertical layout on-tap="{{albumTapped}}">
    <paper-ripple class="recenteringTouch" fit></paper-ripple>
    <content select="img"></content>
    <div class="description">
        <content select="h2"></content>
        <content select="h3"></content>
    </div>
</div>

编辑：

我做了一些进一步的测试，并缩小了问题的范围。看看this 的例子。将样式应用于子元素不会产生任何问题，除非您还指定了不透明度。在链接中给出的示例中，绿色文本已被赋予不透明度。单击此文本不会为我产生涟漪（在 Chrome 36 中运行）。（绿色的分配与它无关，只是为了更容易发现）。点击<h3>标签周围的任何地方都会产生涟漪。

【问题讨论】：

您能否提供更多上下文来重现此内容，最好是使用 jsbin？我在 jsbin 中玩耍并想出了这个，它似乎工作正常：jsbin.com/mowaxe/3/edit
Fwiw，在 Peter 的示例中，父级上的 position: relative 是 fit 的要求，而不是 paper-ripple 本身的要求。
@PeterBurns：我编辑了我的问题，发现它与不透明度有关。
我可以确认 Polymer 0.8 和 Chrome 41 也会出现该问题。

标签： polymer paper-elements

【解决方案1】：

您只需在外部容器上增加z-index，因此所有<content> 都将低于它。例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel='import' href='http://www.polymer-project.org/0.8/components/paper-ripple/paper-ripple.html'>
  <script>console.clear()</script>
</head>
<body>
<style>
  album-small {
    width: 200px;
    margin: 10px;
  }
</style>

<div layout horizontal>
  <album-small>
    <h2>The Shatner</h2>
    <h3>An interminable rambling spoken word piece.</h3>
  </album-small>
  <album-small>
    <h2>What</h2>
    <h3>What wat what wat what what wat</h3>
  </album-small>
</div>
<polymer-element name='album-small' noscript>
<template>
  <style>
    .album-header {
      /* Note: relative positioning seems necessary
         for paper-ripple. */
      position: relative; 
      padding: 10px;
      height: 200px;
      z-index: 100;
    }
  </style>
  <div class="album-header" vertical layout>
    <paper-ripple class='recenteringTouch' fit></paper-ripple>

    <content select="img"></content>
    <div class="description">
      <content select="h2">hi</content>
      <content select="h3">hi</content>
    </div>
  </div>
</template>
</polymer-element>

</body>
</html>

【讨论】：

【解决方案2】：

尝试给包含 div “album-header” 一个 “position: relative” 这解决了我的问题：

.album-header {
    position: relative;
}

在这个问题中找到了这个解决方案：http://goo.gl/a3qccA

【讨论】：

【解决方案3】：

看起来它可以很容易地修复增加纸张波纹本身的z-index，只需将其放入聚合物元素样式标签中：

paper-ripple{
    z-index:10;
}

这里是JSBin

【讨论】：