Неожиданная прокрутка при табуляции по полям формы в слайдере (Chrome)

Question

У меня есть форма внутри слайдера JavaScript. Если я использую клавишу табуляции, чтобы указать фокус на поле формы, которое уже имеет контент, браузер неожиданно прокручивает слайдер. Я видел это только в Chrome (версия 40.0.2214.91 (64-разрядная версия) на Ubuntu 14.04). Мне было интересно, если кто-то еще испытал это, и если бы вы могли найти работу?

Вот фрагмент кода, я использовал, чтобы воспроизвести проблему и сузить условия, способствующие (также в http://jsfiddle.net/gkorban/jtuo5my0/6/):

.viewport { 
 
    border: 2px solid blue; 
 
    width: 400px; 
 
    overflow: hidden; 
 
} 
 
.slider { 
 
    border: 2px solid red; 
 
    width: 600px; 
 
} 
 
.form-wrapper { 
 
    width: 200px; 
 
    border: 2px solid green; 
 
} 
 
input { 
 
    width: 190px; 
 
}

<div class="viewport"> 
 
    <div class="slider"> 
 
    <div class="form-wrapper"> 
 
     <form action="#"> 
 
     <input type="text" name="field1" /> 
 
     <input type="text" name="field2" value="field 2" /> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div> 
 
<p>Click on field 1, then press tab to give focus to field 2.</p>

Я был в состоянии сузить условия следующие:

• Родительский div использует переполнение: скрыто
• Детский ДИВ шире, чем родительский DIV
• Использование клавиши табуляции для изменения фокусирования
• Форма поля приема фокуса уже имеет значение
• до сих пор, только в Chrome
• Отключение/включение Chrome авто-полный Безразлично «кажутся т иметь какое-либо влияние

вопрос кажется похож на тот, сообщил здесь: https://github.com/zurb/foundation/issues/6066, но условия не совсем то же самое (вертикальная прокрутка вместо горизонтальной плоскости; не используя переполнение: скрыто). Так что, возможно, проблема также возникает и в других условиях, чем у меня.

Answer 1

Я нашел быстрое решение для этого, это иногда немного шумит, но включает в себя добавление обработчика событий, когда вы фокусируетесь на ввод в слайдере.

Вот мой код

$('.bx-viewport input').focusin(function() { 
    setTimeout(function() {    // setTimeout makes sure that this runs after 
             // the original problem (it had a delay) 
     $('.bx-viewport').scrollLeft(0); 
    }, 0); 
}); 

Так что ваше решение должно быть, чтобы узнать, какой элемент получает scrollLeft применяется к нему и установить его к нулю.

Heres working jsfiddle: http://jsfiddle.net/jtuo5my0/7/