ポリマーのアイアン画像のダイナミックサイジングは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); 
       } 
      }, 
     } 
    }); 
}); 

これはサファリ（デスクトップまたはモバイル）上で動作しない理由を任意のアイデア？画像はまったく表示されません。

JS Fiddle link

Answer 1

styleネイティブ属性ですが、あなたはattribute binding（attr$="value"）を使用していません。実際には、という名前の新しいプロパティを<iron-image>に設定していますが、これはSafariの要素のスタイリングには影響しません。

は単に style="..." style$="..."に切り替える、修正するには：Safariの10.0.3とSafariテクノロジープレビュー10.2でテスト

<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