CODEWITHSUNDEEP
polymerweb-componentpicturefill
scottnath
scottnath

Reputation: 71

picturefill element inside a polymer web component loses container dimensions

I'm trying to use the <picture> element, which is created by the picturefill js library, inside of a web component I'm creating using Polymer, but it is choosing the smallest possible image as <picture> is not getting any dimensions from the container element.

I have tried giving :host a display:block among a myriad of other atempts at doing this with styling, including making sure the container is 100%, but nothing works.

Here is a codepen of what I'm trying to do showing the polymer-made element using the smallest image, then the <picture> element on it's own showing the correct image.

Note that in the live codepen version that the <hr> (horizontal rule) elements created by the polymer-element are the full width and thus understand the correct width of the container.

This is the code in the codepen:

```

<polymer-element name="picture-container" attributes="value">
  <template>
    <style>
      :host {
      display: block;
        border: 1px solid #000;
        padding: 1em;
      }
    </style>

    <hr>
      <h2>Picture In Polymer Element</h2>
      <picture>
        <source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
        <source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
        <img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
      </picture>
    <hr>

  </template>
  <script>
    Polymer('picture-container');
  </script>
</polymer-element>

<picture-container></picture-container>

<hr>
  <h2>Picture In Polymer Element</h2>
  <picture>
    <source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
    <source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
    <img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
  </picture>
<hr>

```

any help on this greatly appreciated.

thanks, Scott

Upvotes: 0

Views: 156

Answers (1)

scottnath
scottnath

Reputation: 71

UPDATE

There is a running thread on this on the picturefill github issues section. That thread gave a new option in the script section which made this work correctly in Firefox and Safari:

<script>
    Polymer('picture-container',{
      ready: function() {
        picturefill({elements: this.shadowRoot.getElementsByTagName('img')});
      }
    });
</script>

Example codepen: http://codepen.io/scottnath/pen/Wboayg

I discovered that in Firefox (33.03) if I go into about:config and change these two settings to true: dom.image.srcset.enabled dom.image.picture.enabled then this mimics the incorrect behavior of chrome for the picture element.

Still no solution though...

Upvotes: 0

Related Questions