Polymer core-icon not showing in Firefox but Chrome
I'm having a weird problem with the Polymer icon. Below is my snippet:
...
...
<link rel="import" href="../bower_components/core-icons/iconsets/social-icons.html">
...
...
<post-card id="card-1">
<div>Something in bold!</div>
<h2>My first post-card element with core-icon</h2>
<p>Core-icon is not rendering properly on Firefox...Please help!</p>
<core-icon class="large-icon" icon="android"></core-icon>
</post-card>
And my post-card element looks like this:
...
<div class="card-header" layout horizontal center>
<content select="img"><img src="images/{{imgsrc}}" alt="" /></content>
<content select="h2">{{heading}}</content>
</div>
<content select="p">{{para}}</content>
<content></content>
...
When I run the above in Chrome, the icon renders fine, but on Firefox, the icon only blinks once and then disappears!
The rest of the content placed inside the insertion point renders OK in both browsers.
The following screenshot shows what I have in different browsers:
To create the post-card element, I referenced the following link: https://www.polymer-project.org/0.5/docs/start/tutorial/step-2.html
I recently started working with Polymer. We are waiting for expert help. thanks in advance
source to share
Ok. I will work!
This is CSS that didn't work in a similar way in Chrome and Firefox. I had a background property #ffffff set in CSS for the post-card element that surprisingly overlapped icons in Firefox! When I set the bacground property to "none" icons are displayed in both browsers ok!
:host {
/*background: #ffffff;*/
background: none;
position: relative;
padding: 0;
font-size: 1.2rem;
margin-bottom: 8px;
box-shadow: 2px 2px 2px #888888;
@include respond-to(handhelds) { width: 100%; clear:both; display:block !important; background:#ccff00;}
@include respond-to(medium-screens) { width: 30%; float:left; background:#dddddd; }
@include respond-to(wide-screens) { width:25%; float:left; }
margin:5px;
}
NB: I've also tried the following:
but none of the above took place until I set it as
I completely messed up and had no idea that background color could make life miserable!
source to share