IE отображает ошибку прозрачности на высоте> 4096px?

Question

Я работал над диалоговым окном JavaScript с наложением прозрачного фона, когда столкнулся с проблемой на больших страницах.

Если бы страница была большой, прозрачное наложение было бы сплошным (т.е. больше не прозрачным). Я провел некоторое тестирование и обнаружил, что это произошло только в том случае, если оверлей был выше 4096 пикселей (хм, подозрительно, это 2 ^ 12).

Может кто-нибудь проверить эту проблему? Вы видели обходной путь?

Вот мой тестовый код (я использую 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

Поскольку у вас есть фильтр непрозрачности в CSS, я полагаю, что вы косвенно используете DirectShow под обложками для альфа-смешения и композиции изображений. DirectShow использует текстуры DirectX, которые имеют ограничение в 4096x4096 пикселей для DX9, что объясняет это ошибочное поведение.

Answer 2

Как насчет наложения размера окна вместо размера страницы и перемещения его вверх или вниз при прокрутке.

Answer 3

Вы уже работаете на грани (это огромно ...), поэтому я не знаю, что MS классифицирует это как ошибку или «исправит», даже если бы это было.

Возможно, вам придется разбить его на более мелкие оверлейные DIV.

Answer 4

Положение: фиксированное решение - пятнистое решение. В IE оно не очень хорошо поддерживается.

Лучше всего автоматически создавать и добавлять дополнительные прозрачные элементы (с максимальной высотой 2048 пикселей, чтобы покрыть XP DX8, который также имеет эту проблему).

Вот код, который я использовал, предполагая, что у вас уже есть плавающее решение 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";
    }

Answer 5

Почему бы вам не установить фиксированный оверлей?
Таким образом, он не должен быть таким большим, как весь контент страницы.

Просто делаю:

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

Просто убедитесь, что его родитель является документом, а ширина и высота документа составляют 100%. Таким образом, у вас должно получиться намного меньшее наложение.

Позиция: исправлено будет гарантировать, что оверлей будет расположен относительно области просмотра. Таким образом, он всегда отображается в верхнем левом углу.