codemirror/codemirror5

Fork 0

Unwanted scroll to top in Webkit browsers #147

New issue

Closed

opened 2011-07-18 18:45:09 +02:00 by marijnh · 4 comments

marijnh commented

2011-07-18 18:45:09 +02:00

(Migrated from gitlab.com)

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.

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.

marijnh commented

2011-07-18 18:46:02 +02:00

(Migrated from gitlab.com)

<!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>

``` <!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">    <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> ```

marijnh commented

2011-07-19 13:44:30 +02:00

(Migrated from gitlab.com)

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 commented

2011-07-20 06:31:35 +02:00

(Migrated from gitlab.com)

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.

marijnh (Migrated from gitlab.com) closed this issue

2011-07-20 06:31:35 +02:00

marijnh commented

2018-05-25 00:58:13 +02:00

(Migrated from gitlab.com)

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>

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. ```html <div class="grid"> <div class="grid-item"> <div class="container" style="height: 100%; width: 100%;">  </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"/>`): ```html <div class="grid"> <div class="grid-item"> <div class="container" style="position: absolute; height: 100%; width: 100%;">  </div> </div> </div> ```

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

codemirror/codemirror5#147

No description provided.

Rows
Columns