聚合物鐵圖像動態大小不適用於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技術預覽測試10.2（第5版）}