聚合物纤维网组件内的填充元件会损失容器尺寸

时间:2015-01-05 18:41:45

标签: polymer web-component picturefill

我正在尝试使用由picturefill js library创建的<picture>元素,在我正在使用Polymer创建的Web组件中,但它选择的最小图像为{ {1}}未从容器元素获取任何维度。

我试过给:主持一个显示:阻止其中有很多其他尝试使用样式进行此操作,包括确保容器是100%,但没有任何效果。

这是codepen of what I'm trying to do使用最小的图像显示聚合物制造的元素,然后它自己的<picture>元素显示正确的图像。

请注意,在live codepen版本中,由polymer-element创建的<picture>(水平规则)元素是全宽,因此了解容器的正确宽度。

这是codepen中的代码:

```

<hr>

```

对此的任何帮助都非常感激。

感谢, 斯科特

1 个答案:

答案 0 :(得分:0)

更新

有一个running thread on this on the picturefill github issues section。该线程在脚本部分提供了一个新选项,使其在Firefox和Safari中正常工作:

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

示例代码:http://codepen.io/scottnath/pen/Wboayg

我在Firefox(33.03)中发现,如果我进入about:config并将这两个设置更改为true: dom.image.srcset.enabled dom.image.picture.enabled 然后,这模仿了图片元素的不正确的chrome行为。

虽然仍然没有解决方案......