當我在父級中使用transform translateY（0）時，可滾動div中的內容在IE11中閃爍

Question

在IE11中打開以下鏈接。 向下將視口滾動條向下滾動到頁面中間。 現在向下滾動可滾動的div（使用鼠標滾動）。 您會發現滾動條內容閃爍並且位於可滾動div上方。

CodePen頁面鏈接

而且，如果我從modal-dialog類中刪除了transfrom屬性，或者禁用了平滑滾動，則效果很好。

任何人都可以清楚地解釋此閃爍的原因嗎？如果我從對話框中刪除轉換屬性，為什么它可以正常工作？ 這是代碼筆代碼鏈接-

CodePen代碼

的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

問題是外部div上具有類模態和id“ my-id”的固定位置樣式屬性。 當我將位置切換回靜態時，閃爍停止。

此時，您可以嘗試將位置設置為相對，因為它不會引起閃爍。 要模擬固定位置，您可以向“滾動”事件的主體添加一個eventListener並更新頂部（偏移量是您選擇的任何偏移量）：

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

不要忘記限制滾動事件，因為它會迅速觸發。