I have a document set out like so.

When some websocket activity happens, the input field (id=bar, which is hidden by overflow:hidden ) is eventually focused by my code and it shifts my entire parent element over so none of the other controls are visible. Run the fiddle at the bottom for an example.

HTML:

<div class="outer"> <div class="parent"> <div class="child" style="left: 10px; top: 10px; background:red;">Test1</div> <div class="child" style="left: 10px; top: 52px">Test2<div> <input class="child" id="bar" style="left: 30px; top: 10px">Test3</div> </div> </div>

CSS:

.outer { width: 32px; height: 32px; overflow: hidden; } .parent { position: relative; } .child { position: absolute; }

JS:

setTimeout(function() { document.getElementById('bar').focus(); }, 2000);

Note: I set the delay on the timeout low. You may have to refresh the page to see it happen.

Fiddle: http://jsfiddle.net/qa28q48o/2/

How can I prevent this from happening preferably at the CSS level, without using any javascript hacks on the element to reset its scroll.