on webkit browsers typing into edit box causes scrolling

Question

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")

1. Open next link in Chrome or Safari
2. Type something in edit box in right upper corner
3. 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?

Answer 1

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