背景画像とjavascriptはアーティファクトを表示します

Question

こんにちは！ 誰かが私の質問に答えることができますか？私はCSS + Javascriptで簡単なフォグエフェクトを開発しました。 Firefox、Opera、Chromeでうまく動作します。この問題は、IEとEdgeでのみ発生します。このエフェクトは、JSを使用してデスクトップ（divタグ）上の2つの背景イメージを移動します。マイクロソフトWebブラウザは、テクスチャに奇妙なボックスを追加して表示します。それは副作用のように見えます。サイト内の瞬間に見られる問題：

https://www.kubera.info/

CSS：

#fog_one { 
background-repeat: repeat-x, repeat-x; 
background-attachment: fixed, fixed; 
background-image: url(/obrazy/marmur.png), url(/obrazy/marmur.png); 
background-size: 128% 132%, 110% 128%; 
z-index: -2; 
position: fixed; 
left: 0; 
top: 0; 
right: 0; 
bottom: 0; 
} 

Javascriptを：

var fog_one; 
function RenderFog() 
{ 
     var Mil = MonadTimeVar.getMilliSeconds(); 
     fog_one.style.backgroundPosition = ''.concat(Math.ceil(Mil/48), 
'px ', Math.ceil(Math.sin(Mil/1024) * Math.sin(Mil/1240) * 8), 'px', 
',', Math.ceil(-Mil/72), 'px ', Math.ceil(Math.cos(Mil/920) * 12), 
'px'); 
} 
function FogLoaded() 
{ 
     fog_one=document.getElementById('fog_one'); 
     return setInterval(RenderFog,30); 
} 

それのための回避策はありますが、そこにエラーになります私の？

Answer 1

現代版のMicrosoftブラウザでも、透過性のある複雑なPNGファイルはサポートされていません。PNGは少なくとも24または32ビットで、Microsoftがサポートする透過方法を使用していないようです。

本質的に、そこには部分的に透明なピクセルがあるように見え、MSはそこの各ピクセルが色か透明か（部分的に透明な色のピクセルではない）必要があります。

は、8ビットのファイルとして別のものを生産する、あるいは「インデックス付き」オプションで作業してください - これは便利なページがどのようにのように：あなたは本当にIEであなたが望む効果を得るために苦労するかもしれhttps://meta.wikimedia.org/wiki/Fixing_transparent_PNGs

かしかし、各ピクセルがおそらくフォグレイヤーに応じてオンまたはオフになる必要があるので、IEブラウザを検出し、そのための静的背景を持つ方がよい場合があります。