html - Pressing PageUp while in textarea moves website out of the window -

what happens when cursor in <textarea> , i've typed few lines (a.k.a. pressed enter few times) , press pageup, entire website shifts cursor in left top of page, while still in <textarea>. contents of page shifted left, no horizontal scrollbar appears, way work page again refresh it.

it seems happening due many wrappers margins used plus overflow: hidden blocks scrollbar appearing, necessary styling page.

what can stop happening, while @ same time not screwing on entire layout? (about 4000 lines of css... have make have)

example: http://jsfiddle.net/arq35/ (funny side effect: jsfiddle shifts out of position when reproducing issue) (only in chrome , 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 few times , 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 there's 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; } 

this bug reproducing in chrome on win/linux. not reproducing on macos chrome or mozilla, ie. seems chrome bug.

seems way 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/