Question

I was working on a JavaScript dialog with a transparent background overlay when I ran into a problem on large pages.

If the page was large, the transparent overlay would be a solid colour (i.e. no longer transparent). I did some testing and found this only happened in the overlay was greater than 4096 pixels high (hmmm, suspicious, that’s 2^12).

Can anyone verify this issue? Have you seen a work-around?

Here’s my test code (I’m using Prototype):

<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

Since you have an opacity filter on the CSS I believe you are indirectly using DirectShow under the covers for alpha blending and image composition. DirectShow uses DirectX textures, which have a 4096×4096 pixel limit for DX9, which would explain this erratic behavior.