Polymer 1.2.4 paper-progress 和 iron-image 有疯狂的 border-radius

Question

在我的 Polymer-Webapp 中，我发现 iron-image 和 border-radius 的疯狂行为。谁能告诉我这里发生了什么？

正如您在下面的示例中看到的，iron-image 应该有一个圆角边框（通过 css 设置）。但是只要 paper-progress 没有被隐藏，那个圆角的边框就消失了。要显示该行为，您可以在示例中切换 paper-progress 的可见性。我怎样才能避免这种行为？

#round {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  width: 50px;
  height: 50px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

  <link rel="import" href="paper-progress/paper-progress.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-image/iron-image.html">
</head>
<body>
  <paper-progress id="progress" indeterminate> </paper-progress>
  <paper-button raised onclick="document.querySelector('#progress').hidden=!document.querySelector('#progress').hidden">Toggle Progress</paper-button>
  <iron-image sizing="contain" id="round" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/2000px-Red.svg.png"></iron-image>
</body>
</html>

Answer 1

我终于通过在 iron-image 上设置一个 z-index（根据这个）来让它工作。

Polymer 1.2.4 paper-progress 和 iron-image 有疯狂的 border-radius

Polymer 1.2.4 paper-progress and iron-image have crazy border-radius

html

javascript

css

polymer-1.0