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

Posted 2023-05-08

【中文标题】当我在父级中使用 transform translateY(0) 时，可滚动 div 内的内容在 IE11 中闪烁

【英文标题】：Content inside scrollable div flickers in IE11 when I use transform translateY(0) in parent

【发布时间】：2018-10-03 14:53:52

【问题描述】：

在 IE11 中打开以下链接。向下滚动视口滚动条到页面中间。现在向下滚动可滚动的 div（使用鼠标滚动）。您会发现滚动条内容闪烁并移到可滚动 div 上方。

CodePen Page Link

如果我从 modal-dialog 类中删除 transfrom 属性或禁用平滑滚动，它可以正常工作。

谁能清楚地解释这种闪烁的原因？如果我从对话框中删除转换属性，为什么它可以正常工作？ 这是codepen代码链接-

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;
    

【参考方案1】：

外部 div 上的 fixed 位置样式属性，类模式和 id 为“my-id”似乎是问题所在。当我将位置切换回静态时，闪烁停止。

此时您可以尝试将位置设置为相对，因为它不会导致这种闪烁。要模拟固定位置，您可以为“滚动”事件添加一个 eventListener 到主体并更新顶部（偏移量是您选择的任何偏移量）：

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

不要忘记限制滚动事件，因为它会快速触发。