0

In my Polymer-Webapp I found a crazy behaviour of an iron-image with a border-radius. May anybody tell me what is happening here?

As you may see in the example below, the iron-image should have a rounded border (set via css). But as long as the paper-progress is not hidden, that rounded border is gone. To show that behaviour, you may toggle the visibility of the paper-progress in the example. How can I avoid this behaviour? 

#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>
Jokus
  • 473
  • 7
  • 20

1 Answers1

0

I finally got it working by just setting a z-index on the iron-image (according to this post).

Community
  • 1
  • 1
Jokus
  • 473
  • 7
  • 20