画像がリサイズされると透明な背景が白くなる

Question

私は3つの画像を重ね合わせて表示するHTMLページがあります。以下のCSS

#preview{ 
    background-image:url(layer0-image), url(layer1-image); 
    background-size:100%, 100px; 
    background-blend-mode: multiply; 
    width: 820px; 
    height: 350px; 
} 

と

<div id="preview"> 
    <img src="transparent-image"> 
</div> 

拳2つのイメージのCSSプロパティの背景 - ブレンドモードを使用して一緒にブレンドされます：乗算、この上に、私は最後の画像（透明画像を置きます透明な背景（壁の領域が透明な部屋の写真を想像してください）。

結果は、私が欲しい、まさにですが、私はそれが応答するために

#preview{ 
    width:100% 
} 

を置くしようとすると、それは完璧に機能しますが、透明性は失われます。 Chrome、Safari、Firefox（iOS）でこの動作をテストしました。 Chrome、Safari、OSX、Android、Windows上のFirefoxでは問題ありません。

紛失しているものがありますか？御時間ありがとうございます。

EDIT：

レイヤ0-画像および透明画像が同じ画像です、レイヤ0-画像には、透明性を持っていないと私は透明画像を入れて、このブレンド画像の上に、その後レイヤ1-画像と乗算されます。

透明画像を別の画像に変更しようとしましたが、問題はレイヤー0画像とレイヤー1画像のブレンドのようですが、レイヤー0画像と透明画像が同じであるため私は透明性の問題があると思った。

透明

がありますが、何のブレンドを表示しない

#preview{ 
    width:100%; 
    height:auto; 
} 

に置いたときのdiv #previewは0PX高さを有しています。

EDIT2：

私はエラーを表示し、複製する例を追加している：https://jsfiddle.net/dyqnghdo/3/

Answer 1

[OK]を、私は最終的に問題を発見しました。持つ：

#preview{ 
    background-image:url(layer0-image), url(layer1-image); 
    background-size:100%, 100px; 
    background-blend-mode: multiply; 
    width: 820px; 
    height: 350px; 
} 

して、設定を：

#preview{ 
    width:100%; 
} 

エラーをcasused。それを修正するために私は設定しようとしました：

#preview{ 
    width:100%; 
    background-size:cover, 100px; 
} 

私はそれが起こっていた理由が明らかではない場合でも問題は消えています。