在 Safari 中向下滚动时闪烁

Question

我想在页面中的一些固定文本下嵌入 Monaco Editor，我希望 Monaco Editor 的高度正好填满页面的其余部分。人们给了我一个答案（JSBin）：

<html>
    <style>
    body {
        margin: 0;
        height: 100%;
    }

    .rb {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .myME {
        flex:1;
        background: grey;
    }

    #container > * {
        max-height:100%;
        overflow:auto;
    }
    </style>
    <body>
        <div class="rb">
            <div class="top">1<br/>2<br/>3<br/>4<br/></div>
            <div class="myME" id="container"></div>    
        </div>
    <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})

        require(["vs/editor/editor.main"], function () {
          var editor = monaco.editor.create(document.getElementById('container'), {
            value: 'function x() {\n\tconsole.log("Hello world!");\n}',
            language: 'javascript',
            minimap: { enabled: false },
            automaticLayout: true,
            scrollBeyondLastLine: false
          });
        });
    </script>
    </body>
</html>

它适用于 Chrome。然而，在 Safari 中，当快速向下滚动时，我们可以看到闪烁。

有人知道如何解决这个问题吗？

Answer 1

删除此规则中的 overflow: auto 以修复 Safari 滚动问题：

#container > * {
    max-height: 100%;
    overflow: auto; /* remove this */
}

在 Safari 中向下滚动时闪烁

Flicker while scrolling down in Safari

css

safari

flicker