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

"/" operation: 13233 Fast division: 5957 "/" operation: 13148 Fast division: 5103 "/" operation: 13587 Fast division: 6188 "/" operation: 14173 Fast division: 6773 ...是原生属性，但您未使用attribute binding（style）。您实际上在attr$="value"上设置了名为style的新属性，这对于在Safari中设置元素样式没有任何影响。

要解决此问题，只需将<iron-image>切换为style="..."：

即可

style$="..."

demo

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

聚合物铁图像动态尺寸在Safari上不起作用

1 个答案: