Codemirror: Unwanted scroll to top in Webkit browsers

Created on 18 Jul 2011 · 4Comments · Source: codemirror/CodeMirror

I am attaching an example below that shows the bug. Here is how to reproduce:

Open up the page in a Webkit browser (Chrome or Safari).
Click the area to dynamically insert more code editors. Keep adding until the container div starts to scroll a bit.
Scroll down and try to type in one of the code editors that is off the bottom of the div.
Some of the time, when you click in the code editor, the div will scroll to the top.
Some of the time, you are able to click in the code editor, but typing causes a scroll jitter.

Some of the factors that seems to influence this behavior.

The fact that I am using overflow: hidden on the body to make the div rather than the page scroll.
The fact that I am using the flexible box model and the container div is a vbox. Removing this makes the problems go away.

Source

ellisonbg

Most helpful comment

I was experiencing a similar issue when using CSS Grid. For anyone arriving at this later, here's what fixed it for me in case it saves others some time.

I had the following HTML structure. Details omitted for brevity.

<div class="grid">
  <div class="grid-item">
    <div class="container" style="height: 100%; width: 100%;">
      <!-- CodeMirror instance here -->
    </div>
  </div>
</div>

Not exactly sure what was the issue, but the fix was pretty simple. I just added position: absolute to the parent element of the CodeMirror instance (<div class="container"/>):

<div class="grid">
  <div class="grid-item">
    <div class="container" style="position: absolute; height: 100%; width: 100%;">
      <!-- CodeMirror instance here -->
    </div>
  </div>
</div>

chriscalo on 25 May 2018

❤3 👍3

All 4 comments

<!DOCTYPE HTML>
<html>

<head>
    <title>Code Mirror Scroll Bug</title>

    <link rel="stylesheet" href="static/codemirror2/lib/codemirror.css">
    <link rel="stylesheet" href="static/codemirror2/theme/default.css">

    <style type="text/css">
    body {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        overflow: hidden;
    }
        div#outer_vbox {
            height: 100%;
        }
        div#container {
            overflow: scroll;
            border: 1px solid black;
            padding: 10px;
            margin: 10px;
        }
        .CodeMirror {
          border: 1px solid black;
          padding: 10px;
          margin: 10px;
        }
        .CodeMirror-scroll {
          height: auto;
          overflow-y: hidden;
          overflow-x: auto;
        }
        .vbox {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-align: stretch;

            display: -moz-box;
            -moz-box-orient: vertical;
            -moz-box-align: stretch;

            display: box;
            box-orient: vertical;
            box-align: stretch;
        }
        .box-flex {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            box-flex: 1;
        }
    </style>
</head>

<body>

<div id="outer_vbox" class="vbox">

<!-- Without the vbox, the bug goes away -->
<!-- <div id="container" class="box-flex"></div> -->
<!-- With the vbox, the bug is present -->
<div id="container" class="vbox box-flex"></div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
// <script src="static/jquery/js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="static/codemirror2/lib/codemirror.js"></script>
<script src="static/codemirror2/mode/python/python.js"></script>

<script>
    $(document).ready(function () {

        var add_cell = function () {
            var code_mirror = CodeMirror($('div#container').get(0),
                {value: 'a=10'}
            );
        };

        $('div#container').append(
            $('<div style="border: 1px solid black">Click to add CodeMirror editor</div>').click(
                function () {add_cell();})
        );

    });
</script>

</body>

</html>

ellisonbg on 18 Jul 2011

The problem appears to be your absolutely positioned body in combination with some webkit scrolling bug (the textarea is still positioned correctly, and is being scrolled out of view by webkit). This is a rather pathological case, and I don't have time to look into this further at the moment.

marijnh on 19 Jul 2011

Thanks for looking into this. It looks like there are some deeper bugs in the way browsers and handling the flexible box model in situations like this. I have refactored my code and am able to avoid the issue completely. This can be closed.

ellisonbg on 20 Jul 2011

I was experiencing a similar issue when using CSS Grid. For anyone arriving at this later, here's what fixed it for me in case it saves others some time.

I had the following HTML structure. Details omitted for brevity.

<div class="grid">
  <div class="grid-item">
    <div class="container" style="height: 100%; width: 100%;">
      <!-- CodeMirror instance here -->
    </div>
  </div>
</div>

Not exactly sure what was the issue, but the fix was pretty simple. I just added position: absolute to the parent element of the CodeMirror instance (<div class="container"/>):

<div class="grid">
  <div class="grid-item">
    <div class="container" style="position: absolute; height: 100%; width: 100%;">
      <!-- CodeMirror instance here -->
    </div>
  </div>
</div>

chriscalo on 25 May 2018

❤3 👍3

Was this page helpful?

0 / 5 - 0 ratings