Polymer iron-image 动态调整大小在 Safari 上不起作用

Question

我试图通过计算属性的正确宽度和高度并将其用于铁图像的样式属性中，从而使铁图像网格完美地适合屏幕。这适用于 Chrome 和 Firefox，但不适用于 Safari。

<dom-module id="x-example">
<style>
    :host {
        display: block;
    }
</style>
<template>
    <div>
        image sizes should be {{imgWidth}} x {{imgWidth}}px
    </div>
    <iron-image src="http://lorempixel.com/200/200/" style="width: {{imgWidth}}px; height:{{imgWidth}}px" sizing="cover" preload fade></iron-image>
    <iron-image src="http://lorempixel.com/400/200/" style="width: {{imgWidth}}px; height:{{imgWidth}}px" sizing="cover" preload fade></iron-image>  
    <iron-image src="http://lorempixel.com/400/200/" style="width: {{imgWidth}}px; height:{{imgWidth}}px" sizing="cover" preload fade></iron-image>
</template>
</dom-module>

addEventListener('WebComponentsReady', function() {
    Polymer({
        is: 'x-example',
        properties: {
            imgWidth: {
                type: Number,
                value: function () {
                    return Math.round(window.innerWidth / 2); 
                }
            },
        }
    });
});

知道为什么这在 Safari（桌面或移动设备）上不起作用吗？图片根本不显示。

JS Fiddle link

Answer 1

style 是本机属性，但您没有使用 attribute binding (attr$="value")。您实际上是在 <iron-image> 上设置了一个名为 style 的新属性，这对 Safari 中的元素样式没有影响。

要修复，只需将 style="..." 切换为 style$="...":

<iron-image style$="width: {{imgWidth}}px; height:{{imgWidth}}px" ...></iron-image>
<iron-image style$="width: {{imgWidth}}px; height:{{imgWidth}}px" ...></iron-image>  
<iron-image style$="width: {{imgWidth}}px; height:{{imgWidth}}px" ...></iron-image>

demo

^{已在 Safari 10.0.3 和 Safari Technology Preview 10.2（第 5 版）中测试}

Polymer iron-image 动态调整大小在 Safari 上不起作用

Polymer iron-image dynamic sizing doesn't work on Safari

polymer

polymer-1.0