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>

Run code

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>
<content select="p">{{para}}</content>

Run code

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:

enter image description here

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

1 answer

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; }

Run code

NB: I've also tried the following:

1. removed the line background: #ffffff;
2. background: transparent

Run code

but none of the above took place until I set it as

background: none;

Run code

I completely messed up and had no idea that background color could make life miserable!



All Articles