在Safari中滾動時閃爍

我想在一些固定文本的頁面中嵌入摩納哥編輯器，我希望摩納哥編輯器的高度能夠完全填充頁面的其餘部分。人們給了我一個答案（JSBin）：在Safari中滾動時閃爍

<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中，快速滾動時，我們可以看到閃爍。

有誰知道如何解決這個問題？

來源

2017-08-14 SoftTimur

在這個規則中刪除overflow: auto修復Safari的滾動毛刺：

來源

2017-08-18 17:34:20

謝謝...刪除'溢出：auto'並修復Safari的滾動毛刺。但是，我們現在可以在Chrome和Safari中上下滾動查看滾動條。這不是我想要的。 – SoftTimur

@SoftTimur啊 - 我現在明白了。簡單的修復，謝天謝地：在CSS的頂部添加'overflow：hidden;'到你的'body {}規則。 –

但是，在Chrome中，通過這樣做，當您有很多行時，您會看到一些行隱藏在底部。 – SoftTimur

在Safari中滾動時閃爍

回答

相關問題