on webkit browsers typing into edit box causes scrolling

css, google-chrome, html, safari, webkit

Solution

The problem here is that what it looks like you are doing and what you are actually doing are two different things.

It looks like the `div` on the left with a fixed width and `overflow: auto` (`div#kb-board`) and the input field on the right are unrelated elements - but they are not. The input field is actually a child of `div#kb-board` but its parent (`div#palette`) has `fixed` positioning so it sits in the top right of the page.

As a result, the input field is actually on the right hand side of `div#kb-board` and when you type in it the scroll bar moves as you are giving focus to the right hand side of that div.

So in this case, I would say Chrome is showing the correct behavior.

To resolve this you should stop nesting `div#palette` within `div#kb-board`. Since it uses fixed positioning, there is no need to nest it.

<div id="kb-board">
    <div id="boards-container">
        <div id="lane">...</div>
    </div>
    <!-- div#palette was originally here -->
</div>
<div id="palette">
    <input type="text" value="Type here" />
</div>

Working example: http://jsbin.com/obiyec/8

Problem

I have an issue with website markup on WebKit browsers (Chrome & Safari), i.e. when I type something in edit box of right-slider, it scrolls the left area. Please take a look at following example: http://jsbin.com/obiyec/7 http://jsbin.com/obiyec/7/edit - html code (input is inside div with id="palette") - Open next link in Chrome or Safari - Type something in edit box in right upper corner - Notice that scrollbar in left area shifts It is very unlikely to change this markup radically if possible Q. How to prevent scroll-bar from shifting and make it behave same way as it is in FF?

Original source