Полимерная пульсация над всеми детьми

Я использую 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>

Edit:

Я сделал некоторые дальнейшие испытания, и я сузил проблему вниз. Взгляните на пример this. Применение стилей к элементам children не дает никаких проблем, если вы также не назначаете непрозрачность. В примере, приведенном в ссылке, зеленый текст получил непрозрачность. Нажатие на этот текст не создает рябь для меня (работает в Chrome 36). (Назначение зеленого цвета не имеет к этому никакого отношения, просто чтобы было легче определить). Нажатие в любом месте этого тега <h3> делает волну.

источник

2014-07-19 jdepypere

Можете ли вы дать еще несколько условий для воспроизведения этого, в идеале с помощью jsbin? Я играл в jsbin и придумал это, которое, кажется, работает правильно: http://jsbin.com/mowaxe/3/edit –

Fwiw, в примере Питера 'position: relative' на родительском является требование для' fit', а не для 'paper-ripple'. –

@PeterBurns: Я отредактировал свой вопрос, выяснил, что он имеет какое-то отношение к непрозрачности. – jdepypere

Вы должны только увеличить 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>

источник

2015-04-18 04:32:13 codevision

Похоже, он может быть легко исправлена увеличение Z-индекс самой бумаги-пульсацией, просто поместите это в полимер-тег элемента стиля:

paper-ripple{ 
    z-index:10; 
}

Вот JSBin

источник

2015-05-11 20:05:09 Mike

Попробуйте дать содержащее div «альбом-заголовок» «позиция: относительная», это решило мою проблему:

.album-header { 
    position: relative; 
}

Это решение было найдено по этому вопросу: http://goo.gl/a3qccA

источник

2015-07-23 11:25:58

Полимерная пульсация над всеми детьми

ответ

Смежные вопросы