javascript - 在 Internet Explorer 中隐藏元素会在屏幕上留下伪影 (IE 10-11)

Question

我们为我们的页面使用自定义选择框元素（出于某种原因），但在一个特定的地方并且仅使用 IE（在我的情况下为版本 10 和 11）存在问题。

当您打开并关闭框时，有时浏览器会留下该元素的视觉伪影。如果元素下方有一个按钮（处于打开状态），那么这些工件仍然在该按钮的顶部，直到您将鼠标悬停在该按钮上，然后这些工件在该位置消失。

我认为每个人都在他生命中的某个时刻用窗户或其他东西经历过这种行为。对不起，如果我的描述不完美。

以下是一些截图（红色框是被删减的文本，对不起）：

打开状态：

带有工件的关闭状态：

希望我的描述是准确的，我迫切需要解决这个问题。

我无法在我的系统上重现它，但我们的 QA 人员可以始终如一地重现它。它还会根据浏览器的大小而变化。在某些尺寸上，它似乎根本不会发生。一定是IE的一些奇怪的渲染故障。

我不认为它与我们的自定义选择框元素有任何关系，因为它只发生在这个特定的地方，而在我们的旧设计中，我们在不同的地方用完全不同的元素体验了它。当时我觉得是因为 DOM 对 IE 来说太复杂了，但是这个页面几乎没有元素。

编辑：我刚刚发现如果我最小化窗口并再次最大化它，工件就会消失，这应该确认这是一个渲染故障，对吧？

编辑 2：这是我们自定义选择框的代码和 css

HTML：

<div class="input_selectbox">
        <label>Title</label>

    <div class="input_selectbox__head" data-placeholder="">
            <label>
                <input type="hidden" name="id" value="5-10909">
                 Dummy 1
            </label>
    </div>

    <div class="input_selectbox__body">
            <label data-value="" class="">

                No Option
            </label>
            <label id="5-10909" data-value="5-10909" class="input_selectbox__option--selected" data-default="true">

                Dummy 1
            </label>
            <label id="5-12568" data-value="5-12568" class="">

                Dummy 2
            </label>
            <label id="5-20001" data-value="5-20001" class="">

                Dummy 3
            </label>
            <label id="5-20002" data-value="5-20002" class="">

                Dummy 4
            </label>
    </div>
</div>

较少的：

.input_combobox, .input_selectbox {
    display: block;
    font-family: RobotoCondensed-Regular;
    font-size: 14px;
    width: 100%;
    overflow: hidden;

    &:focus {
        outline: none;
    }

    label {
        cursor: pointer;
    }
}

.input_selectbox {
    font-family: Roboto-Regular;
}

.input_selectbox__head {
    border: 1px solid @colorBorderGrey;
    transition: background-color 0.2s, border 0.3s;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: flex;
    background-color: @colorLightestGrey;
    padding: 10px;
    justify-content: space-between;

    &:hover {
        cursor: pointer;
        border-color: @colorDarkGrey;

        &:after {
            color: @colorBlue;
        }
    }

    label {
        display: flex;
        user-select: none;
        pointer-events: none;

        i {
            margin-right: 10px;
        }
    }

    &:after {
        content: "\f078";
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        pointer-events: none;
        transition: color 0.3s, opacity 0.3s, background-color 0.2s;
        display: block;
        padding-left: 10px;
        font-size: 16px;
    }
}

.input_combobox--active, .input_selectbox--active {
    .input_combobox__head, .input_selectbox__head {
        background-color: @colorLightGrey;

        &:hover {
            border: 1px solid @colorBorderGrey;

            &:after {
                color: @colorDarkGrey;
            }
        }

        &:after {
            background-color: @colorLightGrey;
        }

        span {
            background-color: @colorGreyHover;
        }
    }
}

.input_combobox__body, .input_selectbox__body {
    display: none;
    position: fixed;
    box-shadow: rgba(0,0,0, 0.05) 0px 2px 5px 0px;
    background-color: @colorWhite;
    border: 1px solid @colorBorderGrey;
    border-top: none;
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    z-index: 499;

    label {
        font-family: RobotoCondensed-Regular;
        font-size: 16px;
        display: block;
        padding: 10px 20px;
        transition: background-color 0.5s, color 0.3s;
        border-bottom: 1px solid @colorBorderGrey;

        &:hover {
            background-color: @colorLightGrey;
        }

        &:last-child {
            border-bottom: none;
        }

        i {
            margin-right: 10px;
        }

        input[type=checkbox] {
            display: none;
        }
    }
}

.input_combobox__body--top, .input_selectbox__body--top {
    box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 5px 0px;
}

.input_combobox__option--inactive, .input_selectbox__option--inactive {
    opacity: 0.3;
}

Javascript：

function selectbox()
{
    // click
    $(document).on("click", ".input_selectbox__head", function ()
    {
        $(this).trigger("selectbox:toggle");
    });

    // toggle
    $(document).on("selectbox:toggle", ".input_selectbox__head", function ()
    {
        if ($(this).parent().hasClass("input_selectbox--active")) 
        {
            $(this).trigger("selectbox:close");
        }
        else 
        {
            $(this).trigger("selectbox:open");
        }
    });

    // open
    $(document).on("selectbox:open", ".input_selectbox__head", function ()
    {
        var selectbox = $(this).closest(".input_selectbox");

        if (!selectbox.hasClass("readonly") && !selectbox.hasClass("input--disabled"))
        {
            $(".input_selectbox--active .input_selectbox__head").trigger("selectbox:close");

            // Positionierung
            var header = selectbox.find(".input_selectbox__head");
            var headerHeight = header.outerHeight();
            var selectboxBody = selectbox.find(".input_selectbox__body");
            var headerPositionX = header.offset().left;
            var headerPositionY = header.offset().top - $(window).scrollTop();
            var bodyPositionY = headerPositionY + headerHeight;

            selectboxBody.removeClass("input_selectbox__body--top");

            selectboxBody.css({
                "top": bodyPositionY,
                "left": headerPositionX,
                "width": selectbox.width(),
                "bottom": ""
            });

            selectbox.addClass("input_selectbox--active");
            selectboxBody.show();

            // check if offscreen
            var isOut = isOutOfViewport(selectboxBody.get(0));

            if (isOut.bottom)
            {
                selectboxBody.addClass("input_selectbox__body--top");

                selectboxBody.css({
                    top: "",
                    bottom: ($(window).innerHeight() - headerPositionY - 1)
                });
            }

            // close combobox on parent scroll
            var scrollParent = getScrollParent(header[0]);

            $(scrollParent).one("scroll", function ()
            {
                header.trigger("selectbox:close");
            });

            $(document).one("scroll", function ()
            {
                header.trigger("selectbox:close");
            });

            $(window).one("resize", function ()
            {
                header.trigger("selectbox:close");
            });
        }
    });

    // close
    $(document).on("selectbox:close", ".input_selectbox__head", function ()
    {
        var selectbox = $(this).closest(".input_selectbox");

        selectbox.removeClass("input_selectbox--active");
        var selectboxBody = selectbox.find(".input_selectbox__body");

        selectboxBody.hide();
    });

    // change option
    $(document).on("click", ".input_selectbox__body > label", function ()
    {
        var label = $(this);
        var value = label.attr("data-value");
        var headerLabel = $(this).closest(".input_selectbox__body").siblings(".input_selectbox__head").children("label");
        var name = headerLabel.find("input[type=hidden]").attr("name");

        label.addClass("input_selectbox__option--selected").siblings().removeClass("input_selectbox__option--selected");

        headerLabel.html(label.html());
        headerLabel.append('<input type="hidden" name="' + name + '" value="' + value + '" />');
        headerLabel.closest(".input_selectbox__head").trigger("selectbox:close");

        $(this).closest(".input_selectbox").trigger("selectbox:change").trigger("change");
    });

    // close selectbox on outside click
    $(document).ready(function ()
    {
        $(document).on("click touchstart", function (event)
        {
            if ($(event.target).closest('.input_selectbox--active').length == 0)
            {
                $(".input_selectbox--active .input_selectbox__head").trigger("selectbox:close");
            }
        });
    });

    // form reset
    $(document).on("reset", "form", function ()
    {
        var selectboxes = $(this).find(".input_selectbox");

        selectboxes.each(function ()
        {
            $(this).find(".input_selectbox__body").find("label[data-default=true]").click();
        });
    });   
}

标签： javascripthtmlcssinternet-explorer