en navegadores web escribiendo en el cuadro de edición provoca desplazamiento

Question

Tengo un problema con el marcado del sitio web en los navegadores WebKit (Chrome & Safari), es decir, cuando escribo algo en el cuadro de edición del control deslizante derecho, se desplaza al área izquierda.

favor, eche un vistazo a siguiente ejemplo:
http://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - código html (entrada está dentro div con id = "paleta")

1. Abrir siguiente eslabón de Chrome o Safari
2. Tipo algo en el cuadro de edición en la esquina superior derecha
3. Observe que la barra de desplazamiento en el área izquierda se desplaza

Es muy poco probable que cambie radicalmente este marcado si es posible

P. ¿Cómo prevenir la barra de desplazamiento se mueva y hacer que se comporte igual que lo es en FF?

Answer 1

El problema aquí es que lo que parece que estás haciendo y lo que realmente estás haciendo son dos cosas diferentes.

Parece que div a la izquierda con un ancho fijo y overflow: auto (div#kb-board) y el campo de entrada a la derecha son elementos no relacionados, pero no lo son. El campo de entrada es realmente un hijo de div#kb-board pero su elemento principal (div#palette) tiene el posicionamiento fixed por lo que se encuentra en la parte superior derecha de la página.

Como resultado, el campo de entrada está realmente en el lado derecho de div#kb-board y cuando escribe en él, la barra de desplazamiento se mueve al dar enfoque al lado derecho de ese div.

Por lo tanto, en este caso, diría que Chrome muestra el comportamiento correcto.

Para resolver esto, debe dejar de anidar div#palette dentro de div#kb-board. Como usa un posicionamiento fijo, no hay necesidad de anidarlo.

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

Ejemplo de trabajo: http://jsbin.com/obiyec/8