Pressing PageUp while in textarea moves website out of the window

Question

What happens is that when my cursor is in a <textarea> and I've typed a few lines (a.k.a. pressed enter a few times) and I press PageUp, the entire website shifts so that my cursor is in the very left top of the page, while still in the <textarea>. The contents of the page are shifted to the left, but no horizontal scrollbar appears, so that the only way to work with the page again is to refresh it.

It seems to be happening due to the many wrappers with margins used plus the overflow: hidden that blocks the scrollbar from appearing, but those are necessary for styling the page.

What can I do to stop this from happening, while at the same time not screwing over the entire layout? (about 4000 lines of css... have to make do with what I have)

Example: http://jsfiddle.net/ARQ35/ (funny side effect: even jsfiddle shifts out of its position when reproducing this issue) (only in Chrome and Opera)

HTML:

<div id="ultrawrap">
    <div class="wrap1">
        <div class="wrap2">
            <div class="wrap3">
                <section id="content" class="content">
                     <h1>Fiddle of situation</h1>

                     <h3>Press enter a few times and push PageUp.</h3>

                    <form id="form" method="post">
                        <table style="width: 100%;">
                            <tbody>
                                <tr>
                                    <td>
                                        <textarea cols="85" id="id" name="name" rows="6" style="width: 90%">in here</textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                    <div>
                        <br />
                        <br />
                        <br />space filler so that there's a scrollbar
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler
                        <br />
                        <br />
                        <br />space filler</div>
                </section>
            </div>
        </div>
    </div>
</div>

CSS:

#ultrawrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.wrap1 {
    width: 500px;
    position: relative;
    float: left;
    left: 50%;
    background: url() repeat-x 50% 0;
}
.wrap2 {
    width: 500px;
    position: relative;
    float: left;
    left: -50%;
    background: url() repeat-x 50% 259px;
}
.wrap3:after {
    content:'';
    display: block;
    clear: both;
}
.wrap3 {
    background: url() repeat-y 50% 0;
    width: 480px;
    margin: 0 auto;
}

Skimmia

Did you ever find the cause / solution to this? I'm having it as well. – Barrens

Still reproducing in Chrome Win/Linux. Not reproducing in Chrome MacOS – Brendon

I opened an issue about this: bugs.chromium.org/p/chromium/issues/detail?id=890248 – Pelotas

Answer 1

Here is a VanillaJS workaround (also available on GitHub):

document.querySelector('textarea').addEventListener('keydown', event => {
  if (event.key === 'PageUp' || event.key === 'PageDown') {
    const cursorPosition = event.key === 'PageUp' ? 0 : event.target.textLength;

    event.preventDefault();
    event.target.setSelectionRange(cursorPosition, cursorPosition);
  }
});

It's inspired from this article: http://www.competa.com/blog/chrome-bug-pageup-pagedown-textarea-moves-website-window/

See also the original issue I created: https://bugs.chromium.org/p/chromium/issues/detail?id=890248

Pelotas

Answer 2

This bug is reproducing in Chrome on Win/Linux. Not reproducing on MacOS Chrome or any Mozilla, IE. So seems its a Chrome bug.

Seems the only way is to replace page down/up function:

$(document).ready(function(){
$("textarea").keydown(function(event){
    if (event.which == 33) {
        window.scrollTo(0, window.scrollY);
        event.preventDefault();
        event.target.setSelectionRange(0, 0);
        $(this).scrollTop(0);
    }
    if (event.which == 34) {
        window.scrollTo(0, window.scrollY);
        event.preventDefault();
        textareaLength = $(this).val().length;
        event.target.setSelectionRange(textareaLength,textareaLength);
        $(this).scrollTop(9999);
    }
}); });

http://jsfiddle.net/ARQ35/6/

Brendon