Flicker en faisant défiler vers le bas dans Safari

Je souhaite intégrer un éditeur Monaco dans une page sous quelques textes fixes, je veux que la hauteur de Monaco Editor remplisse exactement le reste de la page. Les gens me ont donné une réponse (JSBin):Flicker en faisant défiler vers le bas dans 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>

Il fonctionne dans Chrome. Cependant, dans Safari, tout en défilant rapidement, nous pouvions voir un scintillement.

Est-ce que quelqu'un sait comment résoudre ce problème?

Source

2017-08-14 SoftTimur

Retirez le overflow: auto dans cette règle pour résoudre le petit problème de défilement Safari:

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

Source

2017-08-18 17:34:20

Merci ... 'la suppression overflow: auto' ne fixe le glitch défilement Safari. Cependant, nous pouvons maintenant voir une barre de défilement tout en faisant défiler vers le haut et vers le bas dans Chrome et Safari. Ce n'est pas ce que je veux. – SoftTimur

@SoftTimur Ah - Je vois ça maintenant. Correction facile, heureusement: ajoutez 'overflow: hidden;' à votre règle 'body {}' en haut du CSS. –

Cependant, dans Chrome, en faisant cela, lorsque vous avez plusieurs lignes, vous verrez que certaines lignes sont cachées dans le bas. – SoftTimur

Flicker en faisant défiler vers le bas dans Safari

Répondre

Questions connexes