IEの透過度バグが4096ピクセルを超えていますか？

Question

大きなページで問題が発生したときに透明な背景オーバーレイを使用してJavaScriptダイアログに取り掛かりました。

ページが大きい場合、透明オーバーレイは単色（つまり透明ではありません）になります。私はいくつかのテストを行ったが、これはオーバーレイでのみ起こったことが4096ピクセルよりも大きい（うんと、疑わしい、それは2^12）ことがわかった。

誰でもこの問題を確認できますか？あなたは回避策を見たことがありますか？

はここに（私はプロトタイプを使用しています）私のテストコードです：

<style> 
.overlayA { 
    position:absolute; 
    z-index:10; 
    width:100%; 
    height:4095px; 
    top:0px; 
    left:0px; 
    zoom: 1; 
    background-color:#000; 
    filter:alpha(opacity=10); 
    -moz-opacity:0.1; 
    opacity:0.1; 
} 

.overlayB { 
    position:absolute; 
    z-index:10; 
    width:100%; 
    height:4097px; 
    top:0px; 
    left:0px; 
    zoom: 1; 
    background-color:#000; 
    filter:alpha(opacity=10); 
    -moz-opacity:0.1; 
    opacity:0.1; 
} 
</style> 
<div style="width:550px;height:5000px;border:1px solid #808080"> 
    <a href="javascript:// show overlay A" onclick="Element.show('overlayA')">Display A = 4096h</a> 
    <br /><a href="javascript:// show overlay B" onclick="Element.show('overlayB')">Display B = 4097h</a> 
</div> 
<div id="overlayA" onclick="Element.hide(this)" class="overlayA" style="display:none"></div> 
<div id="overlayB" onclick="Element.hide(this)" class="overlayB" style="display:none"></div> 

Answer 1

CSSに不透明度フィルタが付いているので、間接的にアルファブレンディングと画像合成のためにDirectShowを使っていると思います。 DirectShowはDirectXテクスチャを使用していますが、これはDX9に4096x4096ピクセルの制限があり、この不規則な動作を説明します。

Answer 2

どのようにオーバーレイ代わりにページのサイズのウィンドウのサイズを作り、そしてスクロールに上下に移動するかについて。

Answer 3

あなたは既にエッジ（それは巨大です...）で動作しているので、私はMSがそれをバグとして分類するか、たとえそれが「修正」しているか分かりません。

小さなオーバーレイDIVに分割する必要があるかもしれません。

Answer 4

なぜオーバーレイは固定されていませんか？
そうすれば、ページ全体のコンテンツほど大きくなくてもかまいません。

だけでやって：

#Overlay{ 
    position:fixed; 
    left:0px; 
    top:0px; 
    height:100%; 
    width:100%; 
    rest of declarations 
} 

をちょうどそれが親だことを確認する文書であり、文書が100％の幅と高さを持っています。そうすれば、はるかに小さいオーバーレイでうまくいくはずです。

posotion：fixedは、オーバーレイがビューポートに対して配置されていることを確認します。したがって、常に左上隅に表示されます。

Answer 5

ポジション：固定ソリューションは、スポーティーな解決策です。IEではうまくサポートされていません。

最も良いことは、追加の透明な要素を自動的に作成して追加することです（この問題が発生しているXP DX8をカバーするために2048pxの最大高さで）。

浮動小数点型（floating div）ソリューションを既に使用していると仮定して、私が使用したコードは次のとおりです。

if(document.getElementById('document_body').scrollHeight > 2048) 
    { 
     document.getElementById('float_bg').style.height = "2048px"; 
     document.getElementById('float_bg').style.zIndex = -1; 
     count=1; 
     total_height=2048; 
     while(total_height < document.getElementById('document_body').scrollHeight) 
     { 
      clone = document.getElementById('float_bg').cloneNode(true); 
      clone.id = 'float_bg_'+count; 
      clone.style.zIndex = -1; 
      //clone.style.backgroundColor='red'; 
      clone.style.top = (count*2048)+"px"; 
      document.getElementById('float_el').insertBefore(clone,document.getElementById('float_bg')); 
      count++;     

      this_add = 2048; 
      if((total_height + 2048) > document.body.scrollHeight) 
      { 
       clone.style.height = (document.body.scrollHeight - total_height); 
      } 
      total_height += this_add; 
     } 
    } 
    else 
    { 
      document.getElementById('float_bg').style.height = document.body.scrollHeight + "px"; 
    }