当我在父级中使用transform translateY（0）时，可滚动div中的内容在IE11中闪烁

Question

Open the following link in IE11. Scroll down the viewport scrollbar to the middle of the page. Now scroll down the scrollable div(using mouse scroll). You will find the scrollbar content flickers and goes above the scrollable div.

CodePen Page Link

And if I remove the transfrom properties from modal-dialog class or I disable smooth scrolling, it works fine.

Can anyone please explain the reason of this flickering clearly?why does it work correctly if I remove transform properties from dialog? Here is codepen code link that-

CodePen Code

HTML

<div id="my-id" class="modal">
    <div class="modal-dialog">
        <div style="height: 250px; background-color: coral">Fill space</div>
        <div class="container">
            <div>Test Container</div>
            <ul class="options" id="ddlTest">
            </ul>
        </div>
        <div style="height: 600px; background-color: greenyellow">Fill space</div>
    </div>
</div>

CSS

.modal {
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 1010;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(0, 0, 0, 0.6);
        opacity: 1;
        -webkit-transition: opacity 0.15s linear;
        transition: opacity 0.15s linear;
        touch-action: double-tap-zoom pinch-zoom cross-slide-y;
        -webkit-transform: translateZ(0);
        transform: translateZ(0px);
    }

    .modal-dialog {
        position: relative;
        box-sizing: border-box;
        margin: 50px auto;
        padding: 20px;
        width: 600px;
        max-width: 100%;
        max-width: calc(100% - 20px);
        background: #ffffff;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0px);
        border-radius: 3px;
    }
    .container .options {
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0 4px 4px 0;
        padding: 0 0 0 4px;
        max-height: 200px;
    }

Answer 1

The fixed position style property on the outer div with class modal and id "my-id" seems to be the problem. When I toggle the position back to static the flickering stops.

At this point you can try setting the position to relative as it does not cause this flickering. To emulate fixed position you can add an eventListener to the body for "scroll" event and update the top (offset is any offset you choose):

referenceToModalElement.style.top = (event.currentTarget.scrollTop || document.documentElement.scrollTop) + offset + "px";

do not forget to throttle the scroll event as it is fires rapidly.